We use a CSS selector to indicate where on the website we want to trigger the layer when the customer clicks. Normally it is the "search box" or the magnifying glass icon.
CSS selectors select HTML elements according to its
name, etc. To identify which CSS selector to use, you must inspect your HTML code and locate one of these elements. On your website, simply right-click and select "Inspect".
How to choose the CSS selector
- Click on the icon to select an element in this page to inspect it.
- Select the element, by clicking on it, on which you want your layer to be triggered when the user clicks. For this example, we are going to choose the search box.
- Once your element is selected, the piece of HTML code will be colored below.
If you take a look at the code, you will be able to see there is an 'id' a 'class' and a 'value name'. You can use any of them, knowing that each of them differ in the way they are written:
- For ID, you must precede the text with a
- For a class, you must precede the text with
. Also note that spaces between words are filled with periods, no spaces are allowed. e.g.:
- For the name value, you must enter it in this format
input[name="name value"]. e.g.:
An alternative way to find the CSS selector, when you fail to identify the ID, CLASS or NAME, is to right-click on the code, choose "Copy" and "Copy selector". Note that this will copy the entire path and is not recommended in case you change any part of the HTML code in the future.
This is the result of this action and what we will use as 'trigger' when requested by pasting this code snippet:
📌 Note: The trigger can be different on desktop and mobile, and it has to be unique so that it is activated only when the right place is clicked.
CSS Selector for Embedded Layer
In the case of the embedded layer, we use a CSS selector as an insertion point to indicate in which part of our website we want to place the layer once it is triggered. Use a CSS selector, like
.results-container to choose the element or elements in your page that can hold embedded search results. You must make sure that the selector is appropriate to function as a search results page, taking into account width and height.
The procedure for inspecting HTML elements and choose the CSS selector is the same as described above. In this example, we can use
.site-content as CSS selector.