Google Search
1. The Google Search widget allows users to search directly within a website using Google's search technology. It has a search bar where visitors can type in keywords or phrases. Drag and drop the Google Search widget on the page.
2. Select the Google Search widget to edit the Settings described in Step 3 and further
3. For the Google Search Widget to function properly, it should lead to the page with the Google Search Results widget. Select from the dropdown the page with that widget
Additionally, specify if the page with Google Search Results should open in the current browser tab or a new browser tab
If needed, you can also include an anchor that would lead to the Google Search Results if it's somewhere in the middle of the page. Anchors are links that allow users to navigate quickly to a specific section of a webpage, without scrolling or searching manually.
4. If you need to change the default placeholder for the search, you can do so in the corresponding placeholder field
5. If you wish to change a search icon, click on the pencil icon. If you need to delete an icon, click the bin icon
6. Specify from the dropdown the spacing between the field and button. It can be 0, small, medium, or large.
7. If you need to rename the button name for the search, you can do so in the corresponding field
The rest of the features here - Spacing, Visible On, and Animation are common features in most widgets in the website builder. Please refer to this guide for more information on these features.
8. Switch to the Design tab
9. Select a Preset for the Search widget from the dropdown. Presets are predefined designs that allow users to quickly apply a specific style or layout to a widget. You can customize the preset style in the Design section
Additionally, you can select a preset for the button and specify button size
10. Click "Save" to confirm the changes
Google Search Results
11. The Google Search Results widget displays the results from a search query entered through the Google Search widget. It should be located on a separate page from the Google Search widget. Drag and drop the Google Search Results widget on the page.
12. Select the Google Search Results widget to edit the Settings described in Step 13 and further.
13. Select the Search Engine from a dropdown. In case you haven't added a Search Engine yet, you can do so in Settings - Integration. Please refer to the guide on how to set up a Google Search
14. Specify the cache lifetime for the search results, the max value that can be set is 24 hours. The cache lifetime indicates how long the widget itself retains the search results before making a new request to the Google Custom Search JSON API.
15. The Google Search Results widget will output a search query like the following on the live preview of the website
Since this feature is Google Search Engine, the reason why some of the desired pages may not show in the search query is because they are not indexed by Google yet. Also, other factors like Search Keyword Specificity and whether a page is set to no index should be taken into consideration. Please refer to the following SEO guide
16. The Language dropdown allows you to specify the language that the Google Search Results widget will accept for search queries on the website
17. Specify if the search results query should open in the current browser tab or in a new browser tab
18. If you need the search keywords that visitor types to be highlighted in bold, you can select the "Enable Results Text Formatting" checkbox
19. Specify how many results the widget should display per page. The max value is 10
20. If you need to rename the text that appears when there is no actual result for a search query, use the corresponding No Results Message field.
Use Item Spacing to set spacing for the items
21. In case you wish to disable the divider between each result, select the corresponding checkbox
The rest of the features here - Spacing, Devices, Alignment, and Animation are common features in most widgets in the website builder. Please refer to this guide for more information on these features.
22. Switch to the Design tab
23. Select a Divider Preset from the dropdown. Presets are predefined designs that allow users to quickly apply a specific style or layout to a widget. You can customize the preset style in the Design section.
24. You can also select a different Text Style for the title, link, description, and no results message. For the Text Style overview, please refer to the following guide
25. Click "Save" to confirm the changes
