Widgets

Owned by Former user (Deleted)
Last updated: Oct 17, 2022 by Stephanie Brudvik
23 min read

In this article you will find:

 

Widgets

The Widgets section of Recommendations is where you are able to build and configure the widgets that will appear in the Recommendation zones on your site. In this section you will be able to change the layout, edit styling, select and modify strategies and manipulate which items the engine is recommending.


Navigating to the Widget Home Page


This page gives you an overview of all the widgets currently set up within the workbench. The widgets are organized by where the Recommendation Zones appear within the site. You can choose from Home Page, Product Page, Shopping Cart Page, Landing Page(s), and Other. Once the widget is fully configured, the corresponding div will still need to be placed on the appropriate pages on the front-end, but the administration tool allows you to easily keep track of and organize these widgets based on where they will appear.


1) Select "Workbench" from top Navigation.

2) Select "Recommendations" from Left Navigation and choose "Widgets" from the list of subcategories.



Adding/Editing a Widget

You will need to click the + sign next to the page to view all available widgets on that page.


1) You can edit a widget using the "Pencil" icon, copy a widget using the "Paper" icon or delete a widget using the "Trash Can" icon. Hovering over the "?" icon will show when the widget was created and when it was last modified.

2) To add a new widget, click "Add new."



Adding a New Recommendation Widget


1) Create a name for the Widget. This is the name that will display within the Hawksearch Workbench.

2) Add a Title for the widget. This is the Title that will appear above the widget on site end.

3) Edit the unique identifier GUID of the widget by clicking on the "Edit" button. Each Widget you create will have its own GUID used in the div.  When setting up new widgets in Manage, after testing in staging, you may wish to keep the GUID consistent between corresponding Widgets between environment for coding purposes. This feature gives you the option to edit the GUID to match its counterpart in the opposite environment.

4) The Widget Code Snippet is div that needs to be placed on the page where the widget should appear in order to render the corresponding Recommendation Zone.

5) The Container CSS Class field gives you the option to append a wrapper that will allow you to control the CSS of the widget.

6) Select dates when the widget will stop and start appearing by selecting a Start and End date using the calendar and clock buttons. Note that if no date is specified, the widget will continue to render as long as the div is in place until the widget is deleted or modified. 

7) When configuring a recommendation widget, the minimum number of items that need to be met for this widget to be displayed can be set. If the number of qualifying items is less than this number, the widget will not display.

8) Use the Comments section to make notes about the widget for internal reference.



Widget Layout



Make a selection from the existing layouts from the drop down menu. These layouts can be created and edited in the Layout section of the Recommendation feature in the workbench or by toggling to the "Layouts" tab at the top of the screen.



Editing the Layout of a Widget



1) Specify the "Number of Items" you wish to return in the Recommendation widget.

2) Select whether you would like the widget to display Horizontally across the page or vertically up and down the page.

3) Your developers have complete control of the styling of the widget and can edit HTML directly in the tool using this feature.

4) The "Is Carousel" feature allows the user to scroll through products with in the widget beyond the initial products that fit within the size of the zone. Enabling the Carousel will allow you to make further customizations to the display.

5) Preview will allow you to view what the widget will look like based on the current configuration without saving.



Edit Carousel Features


1) The "Is Carousel" feature allows the user to scroll through products with in the widget beyond the initial products that fit within the size of the zone. Turning Carousel on will allow you to make further customizations to the display.

2) When "Auto-repeat" is on, the widget will automatically rotate through the available products within a Recommendation widget.

3) Enabling "Auto-repeat" will allow you to adjust the "Auto-Repeat Speed". This determines how often the images will rotate. The close to zero, the quicker those products will rotate.

4) Enabling the "Show Prev/Next Buttons"  will display arrows on either side of the widget indicating that the widget is a carousel.

5) The "Animation Speed" determines how quickly the carousel moves when rotating from one product to the next. The closer to zero, the faster these items will move.

6) When "Is Circular?" is enabled, once the last product in the widget is viewed, it will return to the beginning of the rotation.

7) "Show Carousel Dots" will appear at the bottom of the widget to indicate how many different views of products there are within the widget.

8) When the carousel is at rest, "Number of Visible Items" is the number of recommended products that will display.

9) You can specify the number of items that should be rotated through on one rotation. Ex. If 4 products are displayed in the widget and "Number of Items to Scroll" is 4, when a user clicks "Next" all 4 items will be new (assuming that there are 8 or more products to display in the widget).

10) Enabling "Responsive Design" will allow you to edit the breaking points for the widget in the responsive design.

11) Clicking the "Preview" button allows you to visually preview what the layout of your widget will look like without having to save changes.



Recommendation Strategies/Models

1) Enabling "Strategy Automate Ordering" will display products pulled from the most popular strategies (over the last 30 days) first within the recommendation zone.

2) You can choose from two different "Strategy types". The first, "Sequential" will display products based on the order of the strategies configured in the next section taking into account the maximum number of items per strategy that has been specified and assuming there are enough products to match the criteria specified within the strategy. "A/B Testing" randomly returns strategies to help determine which strategies are most successful. The red, circled numbers will indicate the ranking of the popularity each strategy. You can then use the Sequential "Strategy type" to indicate which strategies should have priority.

3) To edit a Strategy, click on the "Pencil" icon. To copy a Strategy, click on the "Copy" icon. To delete a Strategy, click on the "Trash Can" icon. To change the order of strategies, click on the "Double Arrow" icon and drag the strategy to its desired position on the list.

4) Rename your Strategy by and typing directly into the text box under "Name" column.

5) Use the "From" and "To" calendar and time selections to specify when the strategy should be enabled. Note that if no dates are specified the strategy will take effect immediately and remain in place until the strategy is edited or deleted.

6) "Max nof items" determines the maximum number of items that can be returned for each strategy within the widget. If no number is specified, the engine will fill the widget with all the possible matches and move on to the next strategy if there are still remaining slots to be filled.

7) To add a new Strategy, click the orange "Add" button.



Adding a Strategy


When you choose to add a new strategy, you will be prompted to make a selection from 13 different strategies that will define which items will be displayed within the widget. For more information about strategies, refer to Recommendation Strategies Overview. Once you select a strategy, you will be directed to the "General" tab within the configuration.



Also Added to Cart Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

3) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

4) To go back to strategies click "Back."  To add changes click "Done."  To cancel changes click "Cancel."




Also Bought Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last Added to Cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) You may choose to add filters to items that will be recommended in this strategy. First, select whether "any" or "all" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

3) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

4) To go back to Strategies, click "Back. To add changes, click "Done." To cancel changes, click "Cancel."


Also Viewed Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) You may choose to add filters to items that will be recommended in this strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

3) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

4) To go back to Strategies click "Back." To add changes, click "Done." To cancel changes, click "Cancel."


Best Sellers Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) Select a "Time period" from which best sellers will be chosen to populate the Recommendation zone.

3) Sort By allows you to select how items should be prioritized to be returned using certain strategies.

4) You may choose to add filters to items that will be recommended in this strategy. First, select whether "any" or "all" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

5) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

6) To go back to Strategies, click "Back." To add changes, click "Done." To cancel changes, click "Cancel."


Featured Items Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) Select a time period from which best sellers will be chosen to populate the recommendation zone.

3) Sort By allows you to select how items should be prioritized to be returned using certain strategies

4) You may choose to add filters to items that will be recommended in this strategy. First, select whether "any" or "all" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

5) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

6) To go back to Strategies, click "Back". To add changes, click "Done". To cancel changes, click "Cancel".


Hot Now! Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) Define a "Primary Time Period" that Hot Now! Items should be pulled from.

3) In case there are not enough products returned in the "Primary Time Period" that will fit the criteria of the strategy, adding a "Secondary Time Period" provides an additional set of products from a broader range of time

4) "Sort By" allows you to select how items should be prioritized to be returned using certain strategies.

5) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

6) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window

7) To go back to Strategies, click "Back". To add changes, click "Done". To cancel changes, click "Cancel".


More Like This Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) Enter the fields that the more like this Strategy should take into consideration when finding matching items.

3) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

4) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

5) To go back to Strategies, click "Back". To add changes, click "Done". To cancel changes, click "Cancel".


Most Popular Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) Choose a "Time period" from which popular items should be considered.

3) "Sort By" allows you to select how items should be prioritized to be returned using certain strategies.

4) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

5) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

6) To go back to Strategies, click "Back." To add changes, click "Done." To cancel changes, click "Cancel."


Personalized Configuration


1) The only choice available for this Strategy in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on is "Page context." This strategy will return items based on the product ID currently showing on the page.

2) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

3) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

4) To go back to Strategies, click "Back". To add changes, click "Done". To cancel changes, click "Cancel".


Recently Search Configuration


1) The only choice available for this strategy in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on is "Page context." This strategy will return items based on the product ID currently showing on the page.

2) Number of searches indicates how many of the previous searches should be taken into consideration when returning products.

3) Number top items from search specifies how many of the top items from the searches indicated in step 2 should be taken into consideration to be returned in recommendations.

4) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-n" to the right of the condition.

5) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

6) To go back to Strategies, click "Back". To add changes, click "Done". To cancel changes, click "Cancel".


Recently Viewed


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last Added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

3) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

4) To go back to Strategies, click "Back." To add changes, click "Done." To cancel changes, click "Cancel."


Trending Items Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Page context" will return items based on the product ID currently showing on the page. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last Added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) Choose a "Time period" from which trending items should be considered.

3) "Sort By" allows you to select how items should be prioritized to be returned using certain strategies.

4) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

5) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

6.) To go back to Strategies, click "Back". To add changes, click "Done." To cancel changes, click "Cancel".


View Then Bought Configuration


1) Make a choice from in the "View Context" drop down that tells the engine where to get the product information you would like to recommend based on. "Last Viewed" populates the widget with products that match the most recent product page that was viewed. "Last Added to cart" will select products based on the last item that was added to cart. "Last purchased" returns product that will match the last item that was actually purchased.

2) You may choose to add filters to items that will be recommended in this Strategy. First, select whether "ANY" or "ALL" of the conditions must be met by the products being returned. To add a condition, click the "[+] Add Condition" button. Select which field you would like to filter by using the first drop down menu. Choose an operator that will determine how to handle the value and enter the corresponding value in the final condition field. Note that you can use tokens to specify when a field should match the View Context. For example, "Brand is brand." To see the available tokens, hover over the "?" icon next to Filter Settings. To add a sub-condition, click the ">" to the right of the condition. To delete a condition, click on the "-" to the right of the condition.

3) To preview the Strategy click the "Preview" button. You can also click the "Preview" tab at the top of the pop out window.

4) To go back to Strategies, click "Back". To add changes, click "Done". To cancel changes, click "Cancel".



Filtering Recommendations and Defining Default Values

When a strategy utilizes fields to filter and return products, it is recommended you define default values in the event that there are not enough or no products that match the specified criteria. For example, if you have configured a More Like This strategy that will return items that match the brand on the current product page, there is a chance that the current product being viewed is the only product of that brand. In this case, the strategy will not return any products unless a default value is specified.


When filtering recommended items based on fields the engine follows the following process in order to fulfill these specifications:

1) The engine is able to match the value in "Hawksearch.Context object" set via JavaScript

2) The value doesn't exist in "Hawksearch.Context object," but the unique ID of the item is provided. The engine searches for this items in the index, finds the corresponding field value that it is looking for and uses the query responses to return products to populate the strategy. NOTE that because of this, if the Field in question is not stored in the index, the engine will not be able to return products.

3) If neither of these are successful, the value from the default field specified within the strategy in the workbench is assigned.

4) If previous value is empty, the engine will look to the value specified in the corresponding field configuration. To learn more see Fields. 



1) To assign a default value for a field within a strategy click on the "Default" tab of the strategy in questions.

2) Start typing the desired value into the corresponding field and make a selection from the auto-complete.

3) To preview how this affects the most recent user action, click "Preview."

4) To return to the Widget click "Done"



Defining a Trigger


1) To navigate to the Trigger page, use the trigger tab at the top of the strategy pop-out window.

2) Select whether ANY or ALL of the conditions must apply to the trigger for the strategy.

3) Choose the context that will trigger this Strategy. You can choose to trigger the strategy based on visitor targets, landing pages or using a custom request to Hawk.

4) To save changes, click "Done." To exit the window without saving, click "Cancel."



Previewing Strategies

This section within the strategy configuration pop-out window allows you to preview the items that will be recommended using the current strategy. These recommendations are based on your useaction on the URL provided in the window.


1) The Final Recommendation radio button will display products taking both the custom filters and the inherent logic of the strategy. Using the Filter radio button will return any items that match the filter.

2) Toggle between the available View Context available for the strategy by clicking the different icons.

3) The Item # indicates the item that the engine is recommending products for and will correspond to the View Context

4) The preview will only show the top 30 items returned. In the case there are more than 30, the text will indicate how many items match the given parameters.



Saving Changes



Once you have completed all changes click the "save" button. Remember that the widget will not be rendered on site end until the corresponding div is placed onto the page.