Skip to main content
All CollectionsHow-To TutorialsExport Personalized DesignsOther Email Service Providers
How to Add HTML Code for Your Grid & Pixel Graphics to Your Emails
How to Add HTML Code for Your Grid & Pixel Graphics to Your Emails
Cathy Wilson avatar
Written by Cathy Wilson
Updated over a week ago

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:

  1. 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).

  2. You can embed an SVG on the web.

  3. 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:




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.

Did this answer your question?