General Guide for Hello Retail Integration with Third-Party Platforms
This guide covers the principles of Hello Retail headless/SPA integration with third-party platforms like Shopify, Norce, etc.
Most platforms have a frontend API for fetching product details in the needed form, like language, currency, etc., based on the current user.
If you are using one of such systems, our API can help you fetch the product IDs so that you can subsequently fetch the correct information and generate your template. Thus, you receive a list of IDs to show in a given recommendation box or as a result of a search query.
On top of the product integration, one needs to insert our script and handle tracking.
To do this, you just need to follow this guide and pay special attention to the section on SPAs (Single Page Applications) and to calling the reload sdk method.
There are some options for integrating our elements on the webshops, and each of them has both advantages and disadvantages:
- API JSON: This approach allows you to use our API to get a list of products you need to display for a certain product box or a search query. The API response is in the form of a JSON objects array.
You need to use your platform's checkout API to get the product data in the needed currency, language, etc. In addition, the same templates already used when generating HTML to insert into the DOM (Document Object Model) are used.
Thus, in this approach, you handle the data mostly by yourself, which is a good way of carrying out actions as it gives you more control.
This approach is preferable since it allows you to keep the logic and templates created for your existing elements and reuse them for our recommendations.
You can find more information about our API documentation here.
This approach can have some shortcomings when it comes to Newsletter Content recipients and Triggered Emails users.
However, no good alternative seems to be available to it.
- API template: This approach uses our API to get a list of products you need to display for a particular product box or a search query. The difference from the previous example is that you get a complete template back in the API response. Then, the template is ready to be directly inserted into the DOM.
The drawback of this approach is that the logic of showing the needed prices and language shall be part of that template, which potentially increases the total loading time and template complexity.
It moves some work from your end to ours. However, you lose some control, even if we aim to help you with design updates as quickly as we can.
- Selector-based auto insert: This approach allows you only to add a <div> tag when and where you need our script to load the associated element. More information about the <div> tag you can find here.
This approach can be deemed a way of automatic fetching and inserting for the ''API template'' option.