Custom Widget Best Practices

When building a custom widget, operators must address certain key considerations to ensure optimal functionality. The HTML and CSS code should adhere to the following criteria:

By addressing these considerations, operators can create custom widgets that enhance user experience and seamlessly integrate with various web stores

Personalized Fieds

CI employs the Liquid templating language to achieve widget personalization. Below is an overview of the JSON personalization objects available for use in Liquid.


Common Use Cases

Print all the articles returned by the recommendation engine

The below script with loop through all images returned by the recommednation engine and creates simple HTML with images and tracked url

{% for article in rec.article %}


   href="https://{{ | ci_render}}"

   onclick="return CI.User.Track('clickOnProposition', {'articleId': '{{article.product_id}}', 'propositionId': '{{context.proposition_id}}'});"









{% endfor %}

Click conversion tracking

Please use on click action calling the track function of the CI library to ensure the tracking is correctly executed. This is essential to ensure the conversion tracking for your CI dashboard is working as expected.

onclick="return CI.User.Track('clickOnProposition', {'articleId': '{{article.product_id}}', 'propositionId': '{{context.proposition_id}}'});"

Liquid reference rendering 

We have implemented unique filter "ci_render" in our set up. This filter allows the engine to execute shopify liquid language scriptlets included in the value returned in the personalization object.

This means that in the example we are referring value of a link from first article. As the value printed here contains reference to another object "{{organization.domain}}/products/new-shirt". The CI Liquid engine will look for value of "domain" in the "organization" object and print the value in here resulting in final value of "".

href="https://{{rec.article[0].link | ci_render}}"


Still need help?

Please contact our professional support team if you require further assistance