In the Integration module of Spotler Activate Search, you might see Site integration v1 and Site integration v2 below eachother. This means that you get to test and use the new v2 template functionalities and eventually switch to v2 completely. The v2 template offers more integration options and can be fully customizable, while having faster responsive times. New features will also be developed on v2.
Not sure which version of Site integration and templating you're using? Ask the admin of your account on how this is set up for you.
Are you just seeing Site integration, without the v1 and v2? This means that you are working with a v2 template only. The admin of an account is able to toggle this on or off.
Client templates
In this tab, you can create and manage your Search templates. In this article we describe the various templates you can work with.
Create template
You can create new templates by clicking the yellow action button. Here you see the basic template configuration.
Give the new template a clear title for the overview in Activate Search. Next, with the Is custom slider, you decide if this will be a Default template or a Custom template.
In the input field at Search selector, enter the following line: #root > div.top-bar > div > div.search-bar > input[type=text]
At Custom translation file, you can enter the URL of your own hosted translation file. For more information about translations, read the following article: Translations (v2).
Default template
A default template can only be changed using the User Experience and Preference modules. Using these, you can create your own visualization of the template for your Search overlay. Also, configure your textual labels using the Translations module.
To put your default template live, you need to implement the snippets. Read the snippets article for more details.
Custom template
For editing a template, you have 4 tabs:
-
Template
This is your template for any html editing -
SCSS
In the SCSS you have 3 options:
- Tailwind is used by default. Read this website for more details on Tailwind CSS.
- SCSS variables: The User Experience module is also adding SCSS variables to the file.
- Custom CSS: You can add custom css.
-
Config
Custom configuration based on other pages is automatically generated, such as the User Experience and Preference modules. -
Custom javascript
For custom functionality with the template
Using default functionality in custom templates is possible. For translations, we use i18next documentation for labeling. Read more at Translations (v2). For user experience, you can use the general settings by adding the available classes. Find these here: User Experience: classes.