With the Visual editor, you can drag-drop HTML components as visual components into the design panel and design the template according to your requirements.
The Visual editor provides a lot of advanced features to create a compelling template that you can use in your campaigns and send engaging messages to your customers.
You can also customize the height and width of the template as required.
If you have selected the option to display the message in the mobile inbox, you can update the mobile inbox details from the Inbox tab.
The Visual Editor
The right panel in the Visual Editor has 3 tabs: Content, Rows, and Settings. This panel provides the components that you can drag-drop into the design panel to create the template.
The design panel is where you design your template, add text and images, add personalization, and so on.
Design the structure of the template by adding rows.
Add various components like paragraphs, lists, images, and so on, and configure the individual component settings.
Add the content for the various components. You can include different types of links in the content.
Define custom conditions for rows so that a row is displayed only to users who meet the specified criteria.
Add comments for collaborators or view edit history to check previous changes.
The left panel in the template has 3 tabs that you can use to design the structure of the template.
Rows | Using the different types of rows, you can define the layout of your template. |
Content | Drag and drop the various content components into the rows that you have added to the template. |
Settings | Specify the global style settings for the template. |
Locking rows and content blocks in the visual editor
Locking an entire row or a particular content block in the visual editor helps prevent accidental edits or deletions, ensuring better control over the template's structure.
Select a row or a content block on the visual editor.
Toggle the Locked option at the top of the left-side panel to lock or unlock the row or content block.
Please note:
Locked rows or content blocks can only be edited or unlocked by Admins and Authors.
A warning message appears if an unauthorized user attempts to edit a locked row or content block.
Design the template structure
Design the structure or skeleton of your message by dragging rows into the design panel. Each row represents a horizontal area of your message template. Stack up rows to design the entire structure. Using a row with more than one column allows you to put different content elements side by side.
For example, in the following image you can see 2 rows added to the template. The first row has 2 columns which are stacked on a mobile device.
Add components
The Content tab has various components that you can drag and drop into the rows and columns that you have added to your template. After you add a component, when you select the component in the design panel, the properties for that component are displayed in the Content tab. Some components also have an editor toolbar that you can use to edit the component.
The following components are available for you to use in your templates.
Title | Use the title component to add a heading in your template. |
Paragraph | Add the paragraph component to add a rich text to your template. |
List | Add the list component to include ordered and unordered lists in your template. |
Image | Add the image component to add images to your template. |
Button | Add the button component if you want your customers to complete an action. A button in your template adds a call to action (CTA) to it. |
Divider | Add a divider component if you want a horizontal line break between the components of your template. |
Spacer | Add a spacer component if you want to add some vertical space between two components in your template. |
Social | Add the social component to add social media icons that link to your social media profiles. |
HTML | Add the HTML component to add custom HTML in your template. If you are comfortable with writing HTML, drop the HTML component in the template, select it in the design panel, and add your HTML code in the content tab. |
Video | Add the video component to add a video in the email template. |
Icons | Add the icon component if you want to add icons in your template. |
Menu | Add the menu component if you want to provide menu items in your template. You can use this component to add clickable text components in your template. |
AI+ Items | Add the AI+ Items component to include recommendations in your template. |
For example, here is the same template in which we added 2 rows, but with components added to the rows.
The following example shows the component properties and the editor toolbar for a paragraph and image component.
Template settings
From the Settings tab, you can configure settings that apply to the entire message. These global settings are overridden by settings that you apply to individual components when you edit them.
Content area width | The width for the content area. |
Content area alignment | Set the content as left aligned or center aligned. |
Background color | This is the default background color for the message. |
Content area background color | The default background color for the overall content area, which is the area for which you set the width above. |
Default font | The default font family for all the content components. |
Link color | The default link color for all the links in the message. |
Conditional display of rows
The Display Condition feature lets you to define a custom condition for a row so that the row is displayed only to users who meet the specified criteria. In this way, you can use a single template to target multiple audiences.
Use Liquid syntax and personalization attributes to define the condition.
Add the Liquid expression for the condition in the Before field.
Add {% endif %} in the After field.
For example, you can use conditional display of rows to implement localization.
In the following example, in a sales promotion template, two rows are added to the template with gender specific content and a display condition is set such that row 1 is displayed for female users (condition = {% if user.gender == "female" %}) and row 2 is displayed for male users (condition = {% if user.gender == "male" %}).
Comments for collaboration
When you select a component or a row, use the Show comments button to view comments that were previously added and to add your comments to the template.
When you click on the Show comments button in the Content tab, all comments are displayed. You can add new comments or resolve existing comments. This can be useful in cases where your team is working on a template and would like to discuss their designs and decisions.
Edit history
Based on the edits that you make to the message template, the Blueshift platform provides an edit history.
You can undo or redo your changes as you update the template. You can undo or redo up to 15 latest changes. To roll back your template to a point that's older than 15 last changes, click the history timeline button. The history timeline button provides changes that are older than the last 15 ones.
For each event in the timeline you can see the following information:
An icon to identify the type of content that was changed (such as an image or text).
A description of the change.
The time of the change.
When you select an edit in the timeline, the content or row that is tied to the edit is highlighted.
Note: This history is only available while you are editing the template. If you close the template and reopen it, the edit history is empty.
Define clicks and dismiss actions
You can use the URL blueshift://req-push-permission to launch the Blueshift SDK’s push permission request workflow.
You can use the blueshift://dismiss URL to define a custom dismiss action for an in-app message. A user click action to dismiss the message is tracked separately from other click actions.
The following default dismiss actions rendered by the SDK are also tracked as dismiss actions:
Clicking the default close button on modals, HTML, and Visual Editor Templates.
Swiping to dismiss slide-in banners.
Tapping outside to dismiss slide-in banners.
Clicking the back button to dismiss the message (for Android devices).
When URL = empty/NULL.
Note: If an action is not defined as a dismiss action, the user click for that action is tracked as a click in the Campaign Metrics.
Add mobile inbox message details
If you have selected the option to display the message in the mobile inbox, go to the Content > Inbox tab.
Add the title for the message, a short description, and an image. In the preview tab, you can see how the message will appear to a customer in their inbox. You can also include deep links in the short description. Although there is no character limit for the message title or short description, we recommend that the message size be such that the customer should not have to scroll to read the message.
Note: Customers will see the messages in their inbox until the message expires.
Trigger in-app push permission request workflow
To get explicit consent from users to receive push notifications from your app before you send push notifications to them, you can launch the Blueshift SDK’s push permission request workflow by using the blueshift://req-push-permission deep link in your in-app message.
Note: To use this deep link, your app must use Blueshift's iOS SDK version 2.2.6 and above or Blueshift's Android SDK version 3.3.0 and above.
In your in-app template, set the context for sending the push notifications.
For the “Allow” button, use the URL blueshift://req-push-permission to launch the Blueshift SDK’s push permission request workflow.
For the “Deny” button, use the URL blueshift://dismiss. This will help you to track the number of users who opted out of receiving push notifications.
When a user clicks on an in-app notification button to "Allow" push notifications, a push permission dialog is displayed and the user can grant the permission. If the user had already granted push permission, the dialog is not displayed.
If the user clicks on an in-app notification button to "Deny" push notifications permission or if push notifications are disabled, then a dialog is displayed with a message asking the user to go to the app settings to enable push notifications.