We use cookies to help our site work and to understand how it is used. By continuing to browse the site you're agreeing to our use of cookies.

DatoCMS Site Search

Search widget

In addition to the low-level API calls presented in the previous section, our datocms-search JS library also includes a full-featured widget ready to be used in your website:

To use it, add our JS and CSS in your page:

<html>
  <head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/datocms-search@0.1.5/styles/index.css" />
  </head>
  <body>
    ...

    <!-- at the end of your page insert the following line -->
    <script src="https://unpkg.com/datocms-search@0.1.5/dist/datocms-search.widget.js"></script>
  </body>
</html>

You can now call client.addWidget() specifying the CSS Selector where the widget will be inserted:

<body>
  <div id="search-container"></div>

  <script src="https://unpkg.com/datocms-search@0.1.5/dist/datocms-search.widget.js"></script>

  <script>
    var client = new DatoCmsSearch("YOUR_API_TOKEN", "production");
    client.addWidget("#search-container");
  </script>
</body>

Of course, feel free to change the styling of the widget overriding our default CSS styles.

Language selection

If your site is multi-language, you can configure the widget to present them:

var client = new DatoCmsSearch("YOUR_API_TOKEN", "production");
client.addWidget(
  "#search-container",
  {
    locales: [
      { label: "English", value: "en" },
      { label: "Italian", value: "it" },
    ]
  }
);

This will be the final result:

Other options

The widget can be further customized with the following options:

client.addWidget(
  "#search-container",
  {
    perPage: 10,              // specify the number of results per page
    initialQuery: "foobar",   // start the widget with this search
    initialLocale: "it",      // start the widget with this locale 
  }
);