HTML-Based Template Composition
      Back to home
      1. CampaignDrive Help Center
      2. CampaignDrive Knowledge Base
      3. HTML-Based Template Composition

      Preparing Your HTML File

      This is a list of best practices for preparing your file for upload into CampaignDrive.

      Validating Your HTML Code

      Make sure your HTML, CSS, and Javascript code is valid before uploading. These code pieces won't be directly editable once they are uploaded into CampaignDrive. 

      Use your favorite online validator or use these links to validate your code.
      • Javascript validator: http://www.jslint.com/
      • CSS Validator: https://jigsaw.w3.org/css-validator/
      • HTML Validator: https://validator.w3.org/

      Include everything (including the .html file) in a single folder. Make sure that your image links are local references (everything in the same folder) so they point correctly. Once your file is fully packaged, you will upload it to the HTML Template Composition page.

      Supported File Types

      • .JPG
      • .PNG
      • .SVG
      • .GIF
      • Javascript

      Overall Tips Based on Code We've Seen

      • Keep your HTML and CSS inline and not as separate documents. 
      • Do not include application-specific code or tags
      • Verify that the HTML element's id attribute does not start with a number or have a dash/hyphen
        • An example of an HTML element attribute ID:

          <div id="test">Test Content</div>

          In the above example,  id="test"  and "test" is supported as the id attribute of the div.  However,  if the id was id="1test" or id="test-1" those elements are currently not supported in the HTML Template Composer.
      • Verify that the HTML does not have any non-HTML tags or tags similar to Twig tags. Twig tags are tags that are added to the template post upload and if they are duplicated, it could cause the template to become corrupted. 
      • If the HTML template is going to utilize a background image URL for an image slot make sure that there is no CSS overriding the background source URL.
      • Image names cannot start with a number. 
      • HTML tags cannot be in non-styleable text slots on the front end. A warning message will appear. 
      • If the End User is able to select from multiple versions of text options, it's recommended to build DIVs out to accommodate the longes text option.
      • Note that the document name will be added as the default document title to the HTML documents upon download/publish unless a title tag is specified.

      Making Flexible Selectable Text Slots

      For any HTML text element that needs to be selectable on its own in the HTML Compose environment, the HTML composer needs to make each line into a separate HTML element.  

      For example, if the content is "This is part 1. This is part 2", then the template composer should separate the text between two span tags. 

      i.e. <span>This is part1.</span> <span>This is part 2.</span> 

      If the span tags are written as a single span tag (i.e. <span>This is part 1. This is part 2</span>), the two lines will not be selectable individually. They will be selected as a set. 

      To add even more flexibility, the HTML Composer can group the two span tags under a single parent

      i.e. <p><span>This is part1.</span> <span>This is part 2.</span></p>

      Now the user can either choose the parent 'p' tag to make a single slot or chose the individual child span tags to make two separate slots.

      Animated Banners-Specific Tips

      • For multi-slide animated banners, editability can only be added to the last slide.