Before discovering the Nosto Email Widgets Fallback recommendations, make sure Nosto identifies users correctly. In practice, when users log in to your store, Nosto needs to track their customer information. To learn more, read our dedicated guide here.
–
To fit perfectly within your email campaigns, Nosto Email Widgets need to be integrated within your email templates. To make sure it follows your brand guidelines, let’s explore the basics of a Nosto Email Widget structure and how to adjust design.
What is a Nosto Email Widget?
A Nosto Email Widget is an HTML Snippet. It encapsulates a title, product thumbnails and product descriptions. Let’s go through them one at a time.
Title
The recommendation title introduces to the recipient of the email a selection of products e.g “For Smooth Riding” as seen above. It is displayed in plain HTML and styled by a CSS selector being part of the snippet.
The title is served via a H2 tag (class name: nostoHeader) and style via a selector.
When you adjust the visual settings of the title in the Nosto interface, the nostoHeader selector rules are adjusted accordingly. If you wish to load the title on your own, you can drag a text block via your email template editor and disable the title as part of the Nosto settings.
Below the title, product recommendations are being served by Nosto to a given recipient. When one product is recommended by Nosto in an Email Widget, it consists of two images: a product image and a product description image. Both images are served in JPEG format.
Product images
On your store, product images are fetched by Nosto via the Nosto product page tagging. If you want to observe what product image Nosto collects for a given product, visit the product page of the product and you can for example use the Nosto Debug Toolbar to see which product image is indexed. As Nosto index all your product images, thumbnails are created and stored on Nosto’s servers. If product images change on your site, Nosto will update all thumbnails in real-time. In context of Nosto Email Widgets, several thumbnails versions can be used:
– 200×200 pixels,
– 400×400 pixels and
– 750×750 pixels
You can adjust which thumbnail version you want Nosto to serve in the campaign visual settings.
Optionally, you can toggle an option to request an image version 4x bigger than the initial thumbnail version selected in the dropdown menu in the visual settings. For example, if 750x750 is selected, the size of the image served will be 3000x3000.
Product images are requested by URLs always following the same structure as pictured below:
Product description images
Product description images can contain name of the product, price of the product or any other attribute of the product recommended. The product description image is generated by Nosto and served to the recipient of the email. You can style name and price of the recommended product via the basic styling settings and use other attributes via the advanced styling settings.
Product description images are requested by URLs always following the same structure as pictured below:
Note the “desc” before the ? in the URL.
Summary
If 4 products are recommended in an Email Widget, title is displayed in plain HTML and 8 images are served to the recipient: 4 product images and 4 product description images.
Note: As Nosto identifies recipients through their email addresses, you need to make sure Nosto tracks email addresses accordingly via the Nosto tagging. Learn more about user identification for Email Widgets here.