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.
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:
The widget can be further customized with the following options:
client.addWidget("#search-container",{perPage: 10, // specify the number of results per pageinitialQuery: "foobar", // start the widget with this searchinitialLocale: "it", // start the widget with this locale});