Below is a step-by-step guide on how to attach personalized product recommendations in your email campaigns using SendGrid.
1. Start by fetching your url for using product recommendations in emails, the link can be found on the engage platform which is reached using the following link: -> https://engage.zubi.ai/login
The url looks like below,
The following variables need to be changed when added to your email template,
Note: [nano_id] above represents your "account ID", hence it will always be the same independently of the email service used
2. Set the ID (0-9) of the recommendation to be displayed, note that if the same ID is used for two or more recommendations the same products will be displayed. The lower the number the higher score from the recommendation engine. This means that if three recommendations are going to be displayed in the email three different urls will be used, for example,
3. Add the created url (in step 3 and 4) into the image URL field in Sendgrid
4. Add the below url into the link field, if you would like the images to be linked to the product within your store (optional)
Note: The same ID needs to be used on the image url and the link url otherwise the link and image will not match
5. If using a button make sure to add a link to the button (same url as in step 4),
6. Test the recommendations either by sending a test email or view the email in preview. If everything is entered correct, product recommendations will be fetched.
Note: We have seen cases where the settings for the recommendation not being displayed in the "preview mode" hence we recommend to use the method of sending a test email instead.
If you would like to change the design/settings of the recommendations displayed in the email the below variables can be set and added to the url
1. Start by configure the product recommendations to be displayed, the following setting are available,
mage width (w)
|if no value is passed default value of 300 is used|
|Backfill (fill)|| 0/1/2, 0 = recently_added, 1 = top_selling, 2 = top_grossing if no value is passed default value 0 is used If setting is being used, please make sure to use the same fill in image and link url.|
|Font-size (fs)||First font value represent product name, second represents price. If no value is passed 1.25rem+1rem is used|
|Font-weight (fw)||First font weight represents product name, second represents price. If no value is passed default value 300+300 is used|
|Font-family (ff)||First color represents product name and second represents price, if no value is passed default value |
|Color (color)||First color represents product name and second represents price, if no value is passed default value 000+666 is used (Color should be set using HEX format without the leading hash tag)|
|Align (align)||left/center/right, if no value is passed center is used as default|
|Image (img)||1/0, where 1 represents images to be displayed and 0 no image will be displayed. If no value is passed image will be displayed as defaul|
|Title (title)||1/0, where 1 represents product name to be displayed and 0 no product name will be displayed. If no value is passed image will be displayed as default|
|Price (price)||1/0, where 1 represents price to be displayed and 0 no price will be displayed. If no value is passed price will be displayed as default|
|Currency (cur||Three letter ISO-code, if no currency is passed the default currency from store is used|
|Decimals (dec)||The number of decimals to be used for price, if no value is passed 2 decimals are being used.|
|Image padding (ip)||If not set, default value will be 0+0+5px+0|
|Price padding (pp)||If not set, default value will be 5px+0+10px+0|
Note: If fill is being used it is important that the same fill is used in both image and link, otherwise there is a risk that product and link will missmatch.
Below is an example of what the configuration might look like:
2. Combine the above configuration with your unique link for email product recommendations,