Search Widget
Integrate our powerful search widget into your website using the search nodes. This widget leverages AI driven search technology to provide more accurate and relevant search results by understanding the context and meaning of the queries rather than just matching keywords. Now, you can offer this advanced search functionality directly on your site.
Steps to Integrate the Search Widget
Follow these steps to integrate the search widget into your site using the provided CDN script:
1. Whitelist Your Domains
To use the Search Widget, you need to whitelist the domains where you will deploy the widget. This ensures that the widget is only used on approved domains.
- Update your
searchTrigger
settings to include the domains you plan to use. - This configuration is typically done through your admin panel or server settings.
2. Include the CDN Script and Configure the Widget
Add the CDN script to your HTML file and configure the widget using the provided options.
Here’s how to include the CDN script and configure the widget:
<script src="https://widget.lamatic.ai/search.js"></script>
<script>
(function () {
var SEARCH_DIALOG_CONFIG = {
apiUrl: 'https://example-api.com', // Replace with your API URL
workflowId: '12345-abcde-67890-fghij', // Replace with your workflow ID
customButtonId: 'myCustomButton', // Custom button id
primaryColor: '#FF6347', // Tomato color for the search
titleTextColor: '#2E8B57', // Sea green color for the title of the results
subTitleTextColor: '#8B4513', // Saddle brown color for the subtitle of the results
width: '50vw', // 50% viewport width for the dialog
showNavHelperText: true, // Show the navigation helper text
showEscapeHelperText: false, // Hide the escape helper text
searchPlaceholderText: 'What are you looking for?', // Custom placeholder text
searchDebounce: 300, // 300ms debounce time for API calls
linkTarget: "_self", // Open links in the same tab
breakpoint: 640, // Smaller-screen view at 640px
fontFamily: "Verdana" // Custom font family
};
document.addEventListener('DOMContentLoaded', function () {
new SearchDialog(SEARCH_DIALOG_CONFIG);
});
})();
</script>
Props
Below is the documentation for the props used in the search widget configuration:
apiUrl
(required)
- Type:
string
- Description: The base URL of your project endpoint.
workflowId
(required)
- Type:
string
- Description: The workflow ID where you have set up your search configuration.
customButtonId
- Type:
string
- Description: The ID of a custom button that triggers the search dialog. This prop is optional, and if not provided, the default button will be used.
primaryColor
- Type:
string
- Description: The primary color for the search widget, used for the main elements like the search button. Accepts ONLY HEX VALUES.
titleTextColor
- Type:
string
- Description: The color of the title text in the search results. Accepts any valid CSS color value.
subTitleTextColor
- Type:
string
- Description: The color of the subtitle text in the search results. Accepts any valid CSS color value.
width
- Type:
string
- Description: The width of the search dialog box. This can be set using any valid CSS width value (e.g.,
50vw
,600px
).
showNavHelperText
- Type:
boolean
- Description: Determines whether to show helper text for navigation within the search results. Set to
true
to display the text, orfalse
to hide it.
showEscapeHelperText
- Type:
boolean
- Description: Controls the visibility of the escape helper text, which instructs users how to close the search dialog. Set to
true
to show, orfalse
to hide.
searchPlaceholderText
- Type:
string
- Description: Custom text displayed as a placeholder in the search input field, guiding users on what to type.
searchDebounce
- Type:
number
- Description: The debounce time in milliseconds for API calls. This helps in reducing the number of API requests by waiting for the user to stop typing for the specified duration before sending a request.
linkTarget
- Type:
string
- Description: Determines how the search result links will open. Use
_self
to open links in the same tab,_blank
to open in a new tab, etc.
breakpoint
- Type:
number
- Description: The pixel width at which the widget adjusts its layout for smaller screens. This value defines the breakpoint for responsive design.
fontFamily
- Type:
string
- Description: The font family to be used in the search widget. Provide any valid CSS font family name (e.g.,
Verdana
,Arial
,Helvetica
).