There’s a lot to love about Grid and Pixel’s personalized graphics, but we think the easy implementation is something you’ll really adore.
It only takes seconds to add your customized graphic to your customer engagement platform. If you use Klaviyo, Shopify, Omnisend or Sendlane's drag-and-drop editors, please read their respective export instructions.
Our HTML code can be used in a few different ways:
You can embed our graphics in an email and we'll automatically determine the best format to generate each graphic for each customer (e.g. GIF or MP4).
You can embed an SVG on the web.
You can embed an MP4 video on the web.
Here’s all you need to do:
1. Confirm dynamic variables
All of our templates include the option for dynamic imagery to be shown to customers, but that relies on your customer engagement platform having that data to pull from. Specifically, check to see if the email graphic you’re customizing has a product image and/or a space for a customer’s first name. Then, confirm your customer engagement platform has a variable for those elements.
If your customer engagement platform doesn’t support a specific variable, such as an image link for the last viewed product, you’ll want to go to the Products tab in our app and turn the AI toggle to “off” so you can hard-code a specific product image before exporting the code.
2. Generate the code snippet
When you’ve customized your graphic and are ready to embed it, click the purple Add to Email button at the top-left of the graphic editor.
3. Pick where you’ll be adding the graphic
If you use a customer engagement platform that is not Klaviyo, Shopify, Omnisend or Sendlane — or want to add the graphic to HTML code in an email or on the web — click HTML Embed Code.
4. Copy the code snippet
Select where you are going to embed the HTML. Your choices are Email Embed, Web Embed, or Video Embed.
Choose Email Embed to add your graphic to an email. Choose Web Embed to add an SVG to the web. Choose Video Embed to add an MP4 video to the web.
Click Copy Code to copy the entire HTML snippet.
5. Paste the code snippet
Open your customer engagement platform and go to the email you want to update. Find the option in the drag-and-drop builder to add an HTML section and paste the code snippet.
You’ll see the graphic in your customer engagement platform after pasting the code or saving!
6. Replace dynamic variables
Now you will need to replace the placeholder variables with the dynamic variables that match the syntax of the customer engagement platform that you’re using.
Look for placeholder variables in the export code that look like this to replace:
[[YOUR_PRODUCT_VARIABLE_1]]
[[YOUR_CUSTOMER_NAME_VARIABLE]]
[[YOUR_URL_VARIABLE_OR_LINK]]
Don't forget, for the href variable ( [[YOUR_URL_VARIABLE_OR_LINK]] ) you can always hardcode it to a specific URL if you do not have a dynamic URL variable.
note: the variables used in the above animation will not be the same as those used on your customer engagement platform
7. Preview and test
Preview and test the email to make sure it looks exactly as you expect, especially the dynamic variables that you’ve replaced.