Use a product recommendation block on your website

Written by Julie Trenque

Updated on 04/05/2024

3 min

Intermediate

Was this content useful?

This is a premium feature. Please contact your Customer Success Manager to enable it on your Kameleoon Account.

Once you have created and configured a recommender block, you can insert it in your source code or create a Kameleoon campaign.

Add a snippet in your source code

In the block dedicated page, click on Copy code to get the generated snippet associated with your block. You can paste it on your website page source code where you want to display your block.

Create a campaign

Create a widget with a product reco block

To learn how to create a widget with a product recommendation block, please read this article.

Once you have created a widget, associate it with a campaign.

Add the block in the Code editor

Open the Code editor.

To learn how to use the Code editor, please read this article.

For example, you can insert this code:

var algoId = 'f2fabfc7cf98a5441d5a27fbdbeaffe5',
     cssInsertion = '#shopify-section-product-recommendations',
     relativePosition = 'afterbegin'; //Possible values : "beforebegin", "afterbegin", "beforeend", "afterend"
 function insertBloc(algo_insert) {
     Kameleoon.API.Core.runWhenElementPresent(${cssInsertion}, ([element])=> {
         element.insertAdjacentElement(${relativePosition}, algo_insert);
         KameleoonProducts('dynamic_init');
     }, null, true)
 }
 // Specific Account
 let ProductId,
     exclude,
     category,
     categories,
     brands,
     locations,
     successcallback,
     errorCallback;
 successcallback = "kameleoonInitSplide";
 // Insert Kameleoon recommendation block 
 const algo_insert = document.createElement("div");
 algo_insert.classList.add(KameleoonProducts-recommend);
 algo_insert.setAttribute("data-recommender-code",algoId);
 algo_insert.setAttribute("data-recommender-code",algoId);
 algo_insert.setAttribute("data-recommender-block","dynamic");
 if (exclude) algo_insert.setAttribute("data-recommender-exclude",exclude);
 if (categories) algo_insert.setAttribute("data-recommender-categories",categories);
 if (brands) algo_insert.setAttribute("data-recommender-brands",brands);
 if (locations) algo_insert.setAttribute("data-recommender-locations",locations);
 if (successcallback) algo_insert.setAttribute("data-recommender-callback",successcallback);
 if (errorCallback) algo_insert.setAttribute("data-recommender-error",errorCallback);
 insertBloc(algo_insert);

  • In this article :