# Launching your first Search campaign using Search widget
This tutorial guides you through creating and deploying your first AB Tasty search campaign. You will learn how to set up the search widget, configure its display options, customize translations and styling, and launch it on your website.
\
The final section of this guide also introduces additional configuration options that allow you to further customize the widget after your campaign is live.
### Prerequisites
Before you begin, ensure you have:
* Completed the search configuration process (see "Getting started with AB Tasty search")
* Access to AB Tasty Web Experimentation & Personalization platform
* Editor or administrator permissions to create campaigns
* The CSS selector or location of your website's current search bar element
* Translation requirements for your target audience (if applicable)
### Steps
{% stepper %}
{% step %}
#### Create an AB test campaign
Navigate to the AB Tasty Web Experimentation & Personalization platform and create a new campaign:
1. Log in to your AB Tasty account
2. Access the Web Experimentation & Personalization section
3. Click **Create campaign**
4. Select **AB test** as the campaign type
5. Configure basic campaign settings (name, URL targeting, audience)
6. Proceed to the visual editor
{% endstep %}
{% step %}
#### Add the search widget
In the visual editor, add the search widget to your campaign:
1. Locate and click the **Add widget** button in the visual editor toolbar
2. Browse or search the widget library
3. Select the **Search** widget
4. The widget is now added to your campaign and ready for configuration
{% endstep %}
{% step %}
#### Configure the widget layout
Define how and where the search widget displays on your website:
1. In the visual editor, click **Active changes**
2. Locate the blocks related to the Search widget
3. Click **Edit** on the layout configuration block
4. Choose your display mode:
* **Modal**: Search results appear in an overlay window
* **Free placement**: The widget is anchored to a selected element on the site. Use this option when an existing search bar serves as the entry point
{% hint style="info" %}
Depending on the site's architecture, the search bar or search element may differ on the mobile version. In this case, you must implement two separate widgets: one for desktop and one for mobile
{% endhint %}
{% hint style="warning" %}
It is recommended to use the parent element if an "input" is selected when picking the element.
{% endhint %}
Once the widget has been added to your campaign, you can configure how it appears and behaves on your website.
The Search Widget configuration panel allows you to control both the display and functionality of the widget.
Settings are organized into three sections:
1. **Layout:** defines how and where the widget appears on the page
2. **Content**: controls search behavior and available features
3. **Style**: allows you to customize the visual appearance of the widget
{% endstep %}
{% step %}
#### Select the trigger element
Configure which element triggers the search widget display:
1. Navigate to the **Element Selector** section
2. Choose one of two methods to select your website's search bar:
* Click **Pick in the editor** to use the manual picker tool and click on your search bar element in the preview
* Enter the CSS selector directly in the **Element Selector** field (for example: `#search-input` or `.search-bar`)
3. Verify that the correct element is selected
The search widget will activate when visitors interact with this element.
{% endstep %}
{% step %}
#### Translate field names
Customize the language and terminology displayed in the search widget:
1. Access the **Content** section in the widget editor
2. Locate the **Translation keys dictionary**
3. Add key-value pairs to translate field names from English to your desired language
4. Enter translations for fields such as:
* Search placeholder text
* Filter labels
* Sort options
* Call-to-action buttons
5. Ensure proper JSON syntax (no comma after the last item in the dictionary)
Example translation entry:
```
"search_placeholder": "Search products",
"filter_by_price": "Price range",
"sort_by_relevance": "Most relevant"
```
If your product catalog attributes use specific naming conventions, adjust the translations accordingly.
{% endstep %}
{% step %}
#### Customize the widget styling
Adapt the visual appearance of the search widget to match your website design:
1. Navigate to the **Style** section in the widget editor
2. Modify styling properties for each widget element:
* Colors and backgrounds
* Typography and font sizes
* Spacing and padding
* Border styles
* Button appearances
3. Use the standard styling interface similar to other AB Tasty widgets
For advanced customization:
1. Access the **Expert mode** section
2. Add custom CSS code to achieve specific design requirements
3. Preview changes in the visual editor
These settings help ensure the widget integrates seamlessly with our brand guidelines and website aesthetics.
{% hint style="warning" %}
As TSE you will probably use CSS directly rather than using the widget (or a mix of both for quick modifications).\
Due to the native widget styling rules, you’ll probably have to use prefix before your selectors like `div[id^="ab_widget_container_search"][id$="123456"] div.abtasty-search-widget-container` in order to avoid using many “!important” in your CSS rules.
{% endhint %}
{% endstep %}
{% step %}
#### Test your campaign
Before launching, conduct thorough quality assurance testing
{% endstep %}
{% step %}
#### Launch your campaign
Once testing is complete, launch your search campaign live:
1. Review all campaign settings and widget configurations
2. Verify your audience targeting and URL conditions
3. Click **Launch** or **Activate campaign**
4. Confirm the launch action
5. Monitor the campaign status to ensure it activates successfully
Your search widget is now live on your website. Follow the same launch process as you would for any other AB Tasty campaign
{% endstep %}
{% endstepper %}
You may want to further customize the behavior and appearance of Search Widget:
#### Content
The Content section controls how the Search Widget behaves and how search results are retrieved and displayed.
1. **Attach product metadata to result elements**
This option attaches product metadata to the dataset attributes of each result element. This can be useful if you want to manipulate search result elements using JavaScript based on specific attributes, such as modifying elements whose `data-id` matches a certain value.
2. **Custom index**
By default, the widget uses the search index associated with your account. If needed, you can specify a custom index ID (if proposed by AB Tasty for testing purpose) to perform search queries.
The index ID usually follows this format: `[AB Tasty identifier tag]_Catalog` (e.g., `78s56pg87g8j0n1n3_Catalog`).
3. **Autocomplete**
When Autocomplete is enabled, the widget displays search suggestions while the user types in the search field. You can choose between:
* Using the default index linked to your account
* Specifying a custom autocomplete index (if proposed by AB Tasty for testing purpose)
The autocomplete index typically follows this format: `[AB Tasty identifier tag_Suggestions]`
{% hint style="info" %}
Unlike the catalog index, it does not include the `_Catalog` suffix.
{% endhint %}
4\. **Semantic search**
Enable Semantic search if you want the search engine to interpret the meaning of search queries rather than relying only on exact keyword matches.
Two parameters can be forced in the widget to over-ride values set at the account level in Search interface (e.g. to run widget-based AB tests on these parameters):
* **Semantic level**: Defines how strongly semantic relevance affects the search results.
* Range: 0 (no semantic impact) to 1 (maximum semantic impact).
* **Relevance threshold**: Each result receives a relevance score. If a threshold greater than 0 is defined, only results with a score above that value are returned. This allows you to filter results and increase search precision.
5. **Recommendations & Merchandising**
Enable this option to apply recommendation and merchandising rules on top of search results. You must configure the following fields:
* `apiKey`
* `siteID`
* `merchandisingRecoID`
* `recommendationsRecoID`
{% hint style="info" %}
The `recommendationsRecoID` field is used only to display recommended products when the widget opens, before any search query is performed.
{% endhint %}
6. **Marketing banners**
Marketing banners allow you to display promotional content instead of recommended products when the widget opens and no search query has been entered. You can configure up to three banners.
Each banner includes:
* an image
* a title
* description text
* button text
* a redirect link
When users click the button, they are redirected to the configured URL.
7. **Filters**
Filters allow users to refine search results based on product attributes. You can enable or disable filters.
If enabled, you can either keep the default filter order or define a custom order by specifying filter keys in the following format: \``filter1, filter2, filter3`
8. **Redirection URL**
The Redirection URL option redirects users to a specific page when they press Enter in the search field. This is often used to redirect users to a dedicated search results page.
To include the user’s search query in the URL, use the variable: `{{query}}` . Example: `https://www.yourwebsite.com/search?text={{query}}`
The `{{query}}` variable will automatically be replaced with the text entered by the user.
9. **Infinite scroll**
When Infinite Scroll is enabled, additional results are automatically loaded when the user reaches the bottom of the results list. This allows users to browse results continuously without pagination.
10. **Show “add to cart” button**
This option displays an Add to Cart button for each product result. To enable this feature, you must define a function that handles the add-to-cart action.
The function receives two parameters:
* `result` : an object containing product information
* `addToCartButton`: the button element
This allows you to manage actions such as disabling the button during requests or updating the shopping cart.
11. **Custom price**
Use this option when product prices are rendered through an external element or system.
A code block is available to retrieve the appropriate price element. The function receives the search result object as an argument and can be used to extract the element that displays the product price.
```javascript
const handle = /\/([^\/?]+)(?:\?.*)?$/.exec(result.link)[1]
const pricing = document.createElement('product-price-list');
pricing.setAttribute('handle', handle);
pricing.setAttribute('load-product-data', 'true');
return pricing;
```
12. **Language**
The Language setting defines which language should be used to retrieve product information.
If localized product data exists, the widget will display the version corresponding to the selected language.
13. **Translation keys**
The Translation Keys setting allows you to translate text displayed inside the widget.
It uses an object with entries in the format: `key:value` . Example:
```javascript
{
"Result": "Résultat",
"Sort By": "Trier par"
}
```
In this example, the widget texts Results and Sort By will be translated accordingly. Only the keys defined in the object are translated. Texts that are not declared remain unchanged.
{% hint style="info" %}
This works for any text present in the widget : input, filters, buttons etc.
{% endhint %}
### Next steps
You have successfully launched your first AB Tasty search campaign. The search widget is now active on your website and visitors can start searching for products.
If needed, you can further customize the widget's behavior and appearance using the additional configuration options described above.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.abtasty.com/search/getting-started/launching-your-first-search-campaign-using-search-widget.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.