DatoCMS Site Search > Search widget

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.8/styles/index.css" />
  </head>
  <body>
    ...
    <!-- at the end of your page insert the following line -->
    <script src="https://unpkg.com/datocms-search@0.1.8/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.8/dist/datocms-search.widget.js"></script>
  <script>
    var client = new DatoCmsSearch("<YOUR_API_TOKEN>", "<BUILD_TRIGGER_ID>");
    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:

const client = new DatoCmsSearch("<YOUR_API_TOKEN>", "<BUILD_TRIGGER_ID>");
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 
  }
);

Questions?

We're always happy to help with code or other questions you might have. Search our documentation, forum, contact support, or connect with our sales team. You can chat live with other developers in our Slack channel.