Plugin overview

This plugin will enable Designers to create dynamic, personalized creative within a familiar no-code design tool, rather than having to work in HTML. Designers will no longer have to hand their designs to a developer to make them dynamic; instead, they can use this plugin to have their design instantly converted into Lob-ready HTML!

For more information on the plugin, reach out to your CSM or Account Executive. You can download the plugin here, but your CSM or Account Executive can help provide you access to the tools.

Steps to using the plugin

Step 1 - Create a template 

Once you have downloaded the plugin, you will want to create a new base file by creating a template. To do so follow these steps.

1. Create and open a blank design template.
2. Open the plugin at the top and select the desired form factor.
3. Click "Create Template"

Step 2 - Design Away 

Now that you have your template set up, you should go ahead and design as you normally would! There are only two things to keep in mind when you are designing.

1. Mark dynamic text with double brackets. e.g. {{first_name}}
2. Name Images that should be dynamic with double brackets.

Step 3 - Convert to HTML

Once your design is ready, it's time to convert that mail piece into HTML. To do so we want to follow these steps.

1. Hide all guides. They are elements on each page called "_guides"
2. Open the Plugin
3. Select the form factor you are using
4. Click Export

Step 4 - Upload into Lob

Once your design is exported, it's time to upload it into Lob. To do so, you will need to follow these steps.

1. Upload any image assets to a publicly hosted location
2. If you are using custom fonts (ie. fonts not available at https://fonts.google.com/) 
   1. You will be prompted that they will need to be hosted and pointed to via merge variable
   2. You can either edit the document and include them inline
      

        <style>
          @font-face {
            font-family: 'Custom Font';
            font-style: normal;
            font-weight: 400;
            src: url("https://etc");
        }
      
      

   3. Or you can use the provided link merge variable to point to a hosted CSS file which contains your custom font-face stylings

      <link href="{{Custom_Font_stylesheet}}" rel="stylesheet">
      
      

   4. If this process is unfamiliar to you, you may want to consider foregoing the use of custom fonts.
      
      
3. Change local image paths to remote image paths
4. Copy HTML, and paste into the Lob dashboard, within the HTML Template section
5. Preview Template