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.

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

   • Element-based: Search results appear near a specific element on the page

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

Ensure the widget styling aligns with your brand guidelines and website aesthetics.

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.

Next steps

You have successfully launched your first AB Tasty search campaign. The search widget is now active on your website and visitors can use it to find products.