Ctrlk
Pricing
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

1

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

2

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

3

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

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

It is recommended to use the parent element if an "input" is selected when picking the element.

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

4

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.

5

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.

6

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.

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.

7

Test your campaign

Before launching, conduct thorough quality assurance testing

8

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

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.

  1. 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).

  1. 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]

Unlike the catalog index, it does not include the _Catalog suffix.

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.

  1. 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

The recommendationsRecoID field is used only to display recommended products when the widget opens, before any search query is performed.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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:

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.

This works for any text present in the widget : input, filters, buttons etc.

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.

PreviousGetting started with AB Tasty SearchNextOptimizing search performance

Last updated

Was this helpful?