Template Author
Editing a Template
Editing an HTML template

Editing an HTML Template

For an HTML template, you can:

  • Change your HTML template's dimensions.

  • Import an existing design into your HTML template.

  • Edit the HTML elements in the HTML Editor.

Setting dimensions

To set the dimensions of your HTML template:

  1. In the properties pane, select Change.

  2. From Ad Network, select one of the options:

    • **Facebook Formats **Use one of the pre-configured Facebook dimensions.

    • **Instagram Formats **Use one of the pre-configured Instagram dimensions.

    • **Google Ads Formats **Use one of the pre-configured Google Ads dimensions.

    • **Custom Formats **Configure your custom template dimensions.

  3. In Output Size, select the required template dimensions.

  4. Select Update.

  5. In the top-right corner, select Save.

Importing designs

To import an existing HTML design:

  1. In the properties pane, select the Import Design drop area.

  2. Select your HTML file.

Using the HTML Editor

The HTML Editor is a powerful editing tool that enables the template author to edit the HTML tags within the template HTML. By doing this, the text and image values in the HTML are made accessible to the template questions and logic, and thereby facilitate a user being able to customize the HTML template design. For example, a template author can insert an HTML text tag and then associate it with a Date Picker question. When the user selects a date via the picker, they can customize the date displayed in the template.

Text Description automatically generated

Using the HTML Editor, the template author can insert four attribute types in the HTML file:

  • Text attribute

  • Image attribute

  • Video attribute

  • Hyperlink attribute

To access the HTML Editor:

  1. In the top-right corner of the HTML template, select . The HTML Editor window is displayed.

Adding a text attribute

To insert a text attribute:

  1. On the HTML Editor toolbar, in the Search textbox, enter the name of the HTML tag that you want to find/edit, and press Enter. The HTML Editor finds the HTML tag in your HTML file's source code.

  2. Place the cursor before the closing bracket of the opening tag that precedes the text content that you want to make selectable and click to set the cursor at this location for inserting the text attribute.

  3. On the HTML Editor toolbar, select . Brandgility inserts the data-brandgility-text="text1" syntax.

  4. Replace the "text1" characters with an appropriate value of your choice. For example, enter "Location" or "Date". These names will then appear when setting quick logic for a question or in the dropdowns of the logic panel entries.

  5. In the top-left corner of the HTML Editor, select Save.

  6. On the left-hand side of the HTML Editor bar, select x. The HTML Editor closes.

To associate a text attribute with a question:

  1. In the top-left corner, select +. The Questions section is displayed.

  1. From Questions, select the required question type.

  2. In the Quick Logic of the question, select your inserted text value. The Elements drop-down lists every text value that you added and configured in steps 3 and 4 when inserting a text attribute.

  3. When you finish configuring the remaining properties of your question, in the top-right corner, select Save. To learn more about configuring Questions, see Section 5.

  4. In the top-right corner, select Preview. You can now verify if your question works properly.

  5. If you need to make additional changes, in the top-right corner, select Edit. Remember to save any changes you make.

Adding an image attribute

To insert an image attribute:

  1. On the HTML Editor toolbar, in the Search textbox, enter the name of the HTML tag that you want to find/edit, and press Enter. The HTML Editor finds the HTML tag in your HTML file's source code.

  2. Place the cursor inside the HTML image tag that also contains the source attribute for the image that you want to make selectable and click to set the cursor at this location for inserting the image attribute.

  3. On the HTML Editor toolbar, select . Brandgility inserts the data-brandgility-image="image1" syntax.

  4. Replace the "image1" characters with an appropriate value of your choice. For example, enter "Background" or "Actor". These names will then appear when setting quick logic for a question or in the dropdowns of the logic panel entries.

  5. In the top-left corner of the HTML Editor, select Save.

  6. On the left-hand side of the HTML Editor bar, select x. The HTML Editor closes.

To associate an image attribute with a question:

  1. In the top-left corner, select +. The Questions section is displayed.

  2. From Questions, select the required question type.

  3. In the Quick Logic of the question, select your inserted image value. The Elements drop-down lists every image value that you added and configured in steps 3 and 4 when inserting an image attribute.

  4. When you finish configuring the remaining properties of your question, in the top-right corner, select Save.

  5. In the top-right corner, select Preview. You can now verify if your question works properly.

  6. If you need to make additional changes, in the top-right corner, select Edit. Remember to save any changes you make.

Note: The Elements section is not available for the HTML template.

Adding a video attribute

To insert a video attribute:

  1. On the HTML Editor toolbar, in the Search textbox, enter the name of the HTML tag that you want to find/edit, and press Enter. The HTML Editor finds the HTML tag in your HTML file's source code.

  2. Place the cursor inside the HTML video tag that also contains the source attribute for the video that you want to make selectable and click to set the cursor at this location for inserting the video attribute.

  3. On the HTML Editor toolbar, select Brandgility inserts the data-brandgility-video="video1" syntax.

  4. Replace the "video1" characters with an appropriate value of your choice. For example, enter "Animation" or "Movie". These names will then appear when setting quick logic for a question or in the dropdowns of the logic panel entries.

  5. In the top-left corner of the HTML Editor, select Save.

  6. On the left-hand side of the HTML Editor bar, select x. The HTML Editor closes.

To associate a video attribute with a question:

  1. In the top-left corner, select +. The Questions section is displayed.

  2. From Questions, select the required question type.

  3. In the Quick Logic of the question, select your inserted video value. The Elements drop-down lists every video value that you added and configured in steps 3 and 4 when inserting a video attribute.

  4. When you finish configuring the remaining properties of your question, in the top-right corner, select Save.

  5. In the top-right corner, select Preview. You can now verify if your question works properly.

  6. If you need to make additional changes, in the top-right corner, select Edit. Remember to save any changes you make.

Adding a hyperlink attribute

To add a hyperlink attribute:

  1. On the HTML Editor toolbar, in the Search textbox, enter the name of the HTML tag that you want to find/edit, and press Enter. The HTML Editor finds the HTML tag in your HTML file's source code.

  2. Place the cursor inside the HTML hyperlink tag that also contains the href attribute for the hyperlink that you want to make selectable and click to set the cursor at this location for inserting the hyperlink attribute.

  3. On the HTML Editor toolbar, select Brandgility inserts the data-brandgility-href="href1" syntax.

  4. Replace the "href1" characters with an appropriate value of your choice. For example, enter "Link". This name will then appear when setting quick logic for a question or in the dropdowns of the logic panel entries.

  5. In the top-left corner of the HTML Editor, select Save.

  6. On the left-hand side of the HTML Editor bar, select x. The HTML Editor closes.

To associate a hyperlink attribute with a question:

  1. In the top-left corner, select +. The Questions section is displayed.

  2. From Questions, select the required question type.

  3. In the Quick Logic of the question, select your inserted hyperlink value. The Elements drop-down lists every hyperlink value that you added and configured in steps 3 and 4 when inserting a hyperlink attribute.

  4. When you finish configuring the remaining properties of your question, in the top-right corner, select Save.

  5. In the top-right corner, select Preview. You can now verify if your question works properly.

  6. If you need to make additional changes, in the top-right corner, select Edit. Remember to save any changes you make.

Editing a Digital templateEditing an Email template