Home
DatoCMS Site Search
    In this page
    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", "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 
      }
    );
    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.