Adding Editability to HTML Templates

Add editability to ensure End Users can make personalized and relevant landing pages, emails, or animated banners.

Making Editable Slots

 In the HTML Template Compose environment, the template composer must indicate the images or text slots that will be editable for the End Users.

By hovering over the elements in the HTML, a red box will appear around the elements the template composer can add editability to; clicking the image or text you want to make editable will create a "slot" on the left hand side where the template composer can determine how the slot can be edited by the End User. 

There are two types of slots: image slots and text slots.

For both types of slots, you can edit the name of the slot, remove it, or collapse/expand it.

Slot Names

To edit a slot name, you can click on the pencil icon for the layer and that will bring up the below editing module:

You can have up to two names for a given slot: the front-end name and a separate back-end name. The back-end name is not displayed to the End User and is only used in the HTML Document CSV export files. If a value is not entered for the Back-End Name field, then the Front-End name will be used where applicable. 

Image Slots

Click on an image in the HTML layout and an editable slot will be created on the left-hand side. Template composers can name the slot by clicking the edit icon next to the “New Element” text. There are two tabs to define the image editing options for end users.

• Content/Source may be set to “All”, which will give the End User access to the full Media Library minus the "Admin Only" content, or “Content Group,” which will grant the End User access to select content defined by the template composer.  Only .PNG and .JPG assets will be shown. 
  • Only existing Content Groups can be selected/added to HTML image slots.
• User Options:

• • "Can Hide" - the End User can choose to “hide” this image from their page. If this option is chosen, then the HTML code for this image will be removed from the user's final output.
  • "Hide by Default" - Allow image elements to be content-locked but have Editable Destination URLs (aka Image Links) editable on the front end.
  • "Can Edit" - this allows the end user to update the default image in their HTML page. 
  • "Can Crop" - the image slot can be cropped (in most cases, this should be set to ON).
  • "Can Upload" - the End User can upload an image.
  • "Scale Down Image In Display Drawer" - This gives Admins the option to scale down the image display in the Edit drawer. 

Text Slots

Click on a set of text to create a new slot for it. You can name the slot by clicking the edit icon next to the “New Element” text. 

Element Type

A text slot can be one of five element types: 

• Single Line - one line input field
• Multi-line - multi-line text input field
• Styleable Text - multi-line input field that allows the end user to set font attributes such as bold, italics, bullets, etc. The font and font color are set by the HTML source file.
• Dropdown - a dropdown selection of multiple options defined by the Template Composer
• Date and/or Time - this element allows the end user to fill in dates via a date picker and times via a dropdown list. The template composer can define the format of the date/time information and specify a locale for language-specific templates.
  • Available locales include:
    • U.S. English
    • U.K. English
    • A.U. English
    • Spanish
    • French
    • German
    • Chinese
    • Japanese
    • Russian  

• The template composer can determine if the End User is allowed to hide a slot from appearing - this might be an optional paragraph or contact details.
• If "Hideable" is set to “ON,” then the End User can choose to hide this slot.

The Hide by Default Toggle

• When the slot is "Hideable", the Hide by Default toggle allows Admins to set the default text for the slot to hidden by default. The field will show to the End User, but the text will not appear in the preview. 
• The End User would have the ability to show the default content by toggling off the "Hide Element" configuration. 

The Editable Toggle

• The template composer can determine if the End User is allowed to change content and make it different from the default content. 
• If "Editable" is set to "ON," then the End User will be able to edit the content in the text layer. 

Default Copy

• This field allows the Template Composer to update the default copy in a text slot.