Creating a Shoppable Recipe Widget

Step by step guide to create a Shoppable Recipe Widget

 

1. Log in to the Destini CMS and navigate to the Recipe Book Dashboard

Details on accessing the Shoppable Recipes dashboard can be found here.

 

2. Select the 'Add New Recipe' button

In the top right corner of the dashboard, click the 'Add New Recipe' button.

 

3. Insert a name for your Recipe Widget

Add the Recipe Name that should be saved for the widget. Note, this name will be referenced in the installation script file as well as the Recipe Reporting dashboard.

 

4. Select your branded products called within the Recipe

Your entire product catalog is loaded in view, and you can search based on UPC or product name. Additionally, you can filter the list by existing Categories we have in our system.

Select the checkbox next to the branded products that should be configured. Each selected product will be displayed on the right hand rail for your review. 

Additionally, you can add backup products. Backups act as alternatives, so if the primary branded product is not available for a given retailer, our system will look to see if a backup product is available. 

 

5. Select your non-branded products called within the Recipe

Navigate to the Generic Ingredients section where our Generic Ingredient catalog is loaded in view. You can search by keyword.  

Select the checkbox next to the Generic Ingredient that should be configured. Each selected product will be displayed on the right hand rail for your review. 

If the Generic Ingredient you're looking to configure is not in our catalog, you have the option to add it by selecting the 'Add New Generic Product Here' button.

Once you add a new Generic Ingredient, it will be visible in the right rail with a 'NEW' flag.

After you've selected all of the branded and generic products called within the recipe, click the 'CONTINUE TO NEXT STEP' button.

 

6. Confirm your retailer selection

By default, all of your Automated Buy Online retailers that support add-to-cart functionality are configured for the Recipe Widget. If you want to exclude any of those retailers, you can deselect them in the configuration screen. 

Additionally, you have the option to sort retailers which will determine the order they will display within the Recipe modal. To do so, select the icon to the left of the retailer logo and drag and drop.

Note, if Kroger is selected, all supported sub-banners in our retailer coverage map will be automatically included, and inherit the Kroger ranked position. 

 

7. Review retailer links & publish the widget

The last page contains all the retailer links we have in our system for your branded products as well the generic ingredients for you to review.

If a link is missing for one of your branded products, you can insert that directly by clicking on the edit icon, adding the URL within the modal and selecting the 'Save Link' button.

For 'NEW' generic ingredients that you've added, the retailer links will also need to be inserted in this page. This is required as our system will have to scrape those URLs and capture what is needed to add those products to the retailers' carts when a consumer redirects from the Recipe modal.

To insert a retailer link, select the edit icon within the table, add the URL within the modal and select the 'Save Link' button.

Once all retailer links have been reviewed and confirmed, select the 'SAVE NEW RECIPE' button at the bottom right.

Once saved, your Recipe Widget is now ready and the script can be inserted within your recipe page. 

 

8. Optional Recipe Widget review

Once you've published the Recipe Widget, you can review the products configured as well as the retailers that will display within the modal by selecting the 'SEE RECIPE SNIPPET' button on the confirmation modal. 

Alternatively, if you've closed this modal, you can access the 'Recipe Snippet Preview' by clicking on the three dots within the recipe table and selecting the link.

Once you've selected the button or link, a dummy recipe page will be loaded in view. The content or images will not be included within the Recipe Widget. Those are simply placeholders to provide an idea of what the Recipe button and modal could look like on an actual recipe page.

Scroll down under the 'INGREDIENTS' section, and view your Recipe Widget button. Upon clicking, the Recipe modal will open and display the retailers that will come through based on the user's location.