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 
  }
);