In this article, you will find information on how to place your Product Finder on your website to allow your users to interact with it.
Last updated
Once your Product Finder looks the way you want, you need to decide how you want your customers to be able to access the Finder. To begin, navigate to the Activations tab of your Product Finder, as shown in the screenshot below.
Several activation options are available in the Activations tab, namely:
URL Parameter
Javascript Snippet
Ribbon
In-line Rendering / Full Page Widget
You are also able to set Filters that apply to all of your activations. This process is outlined at the bottom of this article.
The option to activate your Product Finder with a URL parameter is always available to you and can be used however you would like on your site, with no additional setup.
You can add a query parameter to the end of any URL for your website. When a user goes to the URL with the Product Finder parameter, the Finder will default to open.
Each URL Parameter is unique per Product Finder. To locate it, click on URL Parameter in the Activations Tab. A pop-up will open displaying the parameter, as shown in the screenshot below.
In this example, the URL Parameter is ?running-shoe-finder=open. You can add the query at the end of any URL of your website.
The Crobox snippet needs to be installed on the page where the Finder will open.
The Finder needs to be active on the page (see the Advanced Filtering section of this article).
This activation method is recommended when you want to direct traffic from outside of your website directly to the Product Finder (for instance, through a marketing email or an ad).
We would not recommend using this when you are directing from somewhere on your site, because activating the Finder via a Javascript Snippet is a more elegant solution for this use case and prevents your customers from having to be redirected to a different page.
Activating the Product Finder by using a Javascript Snippet is the second option that is always available to you, and you can implement this in various ways, depending on your use case.
The benefit of this activation method is that it does not require redirecting a user to another page. This way the user can activate the Finder from a PLP, or a PDP without leaving the page.
You can implement a string of code into an element of your site to open the Product Finder directly on that page.
Each Javascript Snippet is unique per Product Finder. To locate it, click on Javascript Snippet in the Activations Tab. A pop-up will open displaying the snippet, as shown in the screenshot below.
The Crobox snippet needs to be installed on the page where the Finder will open.
The Finder needs to be active on the page (see the Advanced Filtering section of this article).
We suggest implementing the Javascript Snippet, if you want to have a banner or any other element on a specific page that will allow the users to activate the Finder directly on that page (such as a PLP or a PDP), rather than redirecting the user to another page to interact with the Finder.
The Activation Ribbon is another type of activation that is available for your Product Finder. It requires some minimal set up, which we will detail below.
The Activation Ribbon shows on the right side of the pages where it is targeted. You can customize it by clicking on Ribbon in the Activations tab. This will open the Ribbon editor, as shown in the screenshot below.
The following customization options are available in the Ribbon editor.
Text Color (hex code)
Font Size (can be in rem or px, the default value is 14px)
Font Family
Font weight (in px)
You can add an icon within the tab/ribbon, which will show before the text, as shown in the screenshot below.
Image: You can click to upload a .svg (recommended) or .png image for the icon.
Image Padding: Select how much space will be around the icon.
Image Size: Select the size the icon will be displayed in (the value can be in px, rem, or % size of the image).
Background color: Select the color of the tab (hex code).
Border radius: This affects how rounded the tab is (default value is 5px).
Padding: This affects the spacing around the text and image.
Z-index: This field determines where the tab appears in relation to the other elements on your site. Elements with a higher z-index will be placed on top of elements with a lower z-index.
Wobble after 5 seconds: You can check this off if you would like to call attention to the Product Finder after a user has been on the page for 5 seconds.
Height: Select how tall the tab is (the default value is 40px).
Top: Select how far up the web page the tab is displayed. For example, 20% would mean that the tab is 20% from the top of the page (the default value is 50%).
In this section, you can add any CSS snippets you’d like to customize the ribbon further. Any CSS snippets you add will only affect the ribbon.
Here you can translate the text in the ribbon into different languages.
This is where you determine where the ribbon should show on your site (which pages, countries, etc).
These filters operate the same way as the Advanced Filters for all activations (see the Advanced Filtering section of this article).
Keep in mind that adding any filters in this section will only affect the ribbon. However, any other filters you add in Advanced Filtering will also apply.
In-line Rendering should be used if you have a page dedicated to the Product Finder. It requires some setup from your team, namely creating a page on your site for the Finder to be placed, but once this is done it is very easy to set up.
When setting up the page for the Full Page widget, you should add a CSS Selector on the page for the Finder to target. This would ideally be a unique ID, such as #product-finder-placement.
Once this is done, the setup in the Crobox app is simple:
Click on Create activation → In-line Rendering (shown in the video below)
Set the Style options (detailed below)
In the CSS Selector Target field add the CSS selector target that you added on the Product Finder page. The selector should start with a # if the selector is an ID or a . if it is a CSS class.
Height (in px or %)
Max Width (in px or %)
Background color: This indicates what color the area behind the Product Finder should be, if the Finder’s max width is smaller than the screen width. We usually recommend a color that matches your website's background color.
This is where you determine the page(s) where this in-line activation should show.
These filters operate the same way as the Advanced Filters for all activations (see the Advanced Filtering section of this article).
Keep in mind that adding any filters in this section will only affect the In-line Rendering. However, any other filters you add in Advanced Filtering will also apply.
Even when using a unique CSS selector target, we still recommend targeting only the URL.
We recommend that you exclude this page from the activation of your ribbon (if you are using one). If the ribbon appears on the same page as the in-line version of the Finder, they will interact with each other which causes unexpected behavior for your customers.
Under the Create activation button, you will see the Advanced Filtering section. These filters apply to all of the activation types. A Javascript activation or URL Parameter will not work on a page that is excluded by these filters.
You can filter on the following properties, to either exclude certain pages or include certain pages:
Page Type
Country
Language
Page URL
Additionally, you can set up a Conditional filter. This involves setting up extractors for the Product Finder to pick up on your site. Please contact your Customer Success Manager, if you think this would be helpful for you.
