Using in-app template builder

The in-app template builder allows you to:

create in-app message templates from scratch and edit them by using HTML, CSS, and JavaScript

Important: The SRInApp.close() method must be included in every in-app message.
use the ready-made templates from the Predefined templates folder.

The Predefined templates folder provides you with templates for the most common campaign scenarios such as sending an abandoned cart, displaying a carousel with item recommendations, and displaying a simple banner with a button.

Modification of the ready-made templates doesn’t require applying changes to the template code. The template builder contains a user-friendly configuration form that brings editing down to filling out fields that define the properties of the template. This makes editing templates possible by any user regardless of the programming skills. You can simplify the editing of your own templates as well by creating custom configuration form adjusted to your needs. Thanks to this you can edit your template or create its variations dedicated for different scenarios.

Additionally, you can personalize the content of the message by using inserts. Inserts allow you to refer to customer attributes (such as name, city, size), product recommendations (for example, last seen items or added to a cart), and the results of aggregates, expressions, and metrics.

Character limits

The template to be used in an in-app message campaign cannot exceed 60,000 characters.

Good practices

When creating or editing in-app message content:

Place the the SRInApp.close() (or SRInApp.hide()) method at the beginning of the JS script.
Use try/catch to handle possible fatal errors in the JS script.
Handle situations where Jinjava inserts return empty data.
When adding external links to your message:
- Only link to sites you trust.
- Don’t link to large images that may negatively affect performance.
- Don’t link to resources whose CSS/HTML may be blocked. If you have resources loaded from your own URLs, set Synerise.settings.inAppMessaging.contentBaseUrl and use relative paths in HTML/CSS.

Editing a ready-made template

Go to Communication > In-app messages.
On the left pane, select Templates.
From the list of template folders, select Predefined templates.
Select one of the templates to edit.
- Abandoned cart
- Bottom bar
- Carousel with context recommendations
- Carousel with recommendation campaign
- Fullscreen
- Modal
- Price alert
- Swiping mechanism with recommendation campaign
- Top bar
- Walkthrough
  Result: You are redirected to the code editor.
You can edit the template in two ways:
- Edit the code of the template (add inserts, add variables).
  The code of the template is embedded in <body when the message is displayed, so it can’t include the <html> or <head> elements.
- Go to the Config tab and fill out the form.
After you make changes to the template, you can check the preview.
If the template is ready, in the upper right corner click Save this template > Save as.
On the pop-up:
1. In the Template name field, enter the name of the template.
2. From the Template folder dropdown list, select the folder where the template will be saved.
3. Confirm by clicking Apply.

Creating a template

Go to Communication > In-app messages.
On the left pane, select Templates.
In the upper right corner, click New Template.
Use the HTML, CSS, and JavaScript tabs to define the properties of the template.
The code of the template is embedded in <body when the message is displayed, so it can’t include the <html> or <head> elements.
If the template is ready, in the upper right corner click Save this template > Save as.
On the pop-up:
1. In the Template name field, enter the name of the template.
2. From the Template folder dropdown list, select the folder where the template will be saved.
3. Confirm by clicking Apply.

Adding an insert in the template code

To use data such as analysis results or product recommendations in the code of the template, use Inserts available on the upper right side of the preview.
Read more about how you can use inserts in communication with customers.

Click Inserts.
Result: A pop-up shows up.
From the dropdown list, select the type of the insert.
Result: A list of inserts of the selected type opens.
Click the insert you want to add to the template.
Result: A field with the Jinjava code appears.
To copy the code to the clipboard, click the icon on the left side of the field.
Paste the code in the code of the template.

JavaScript methods in in-app messages

JavaScript methods can be used to let the SDK Listeners and Delegates handle actions from in-app messaging campaigns. The methods only work when the Listeners/Delegates are implemented and running.

Every message must include a method to close or hide the message.

Close a message

This method sends an inApp.discard event when closing the in-app.

SRInApp.close()

The method has no parameters.

Close message and send an event

This method sends an additional event (inApp.discard is sent automatically) when closing the in-app.

SRInApp.closeAndTrigger(action,params,label)

action is the event’s action name (string) in the context.action format, for example page.visit. The maximum length is 32 characters.
params is an object with free-form JSON parameters to send with the event.
label is a string with a human-readable summary of the event. It is obligatory, but not saved in persistent storage and can’t be used in Analytics or Automation and is not displayed in the Profiles module.

Hide a message

This method sends an inApp.hide event when hiding the in-app.

SRInApp.hide()

The method has no parameters.

Open URL

This method sends an inApp.click event when a customer opens an URL by clicking a link in the message.

SRInApp.openUrl(url)

url is the address to open (string).

Open deeplink

This method sends an inApp.click event when a customer clicks a link (deeplink).

SRInApp.openDeeplink(deeplink)

deeplink is the deeplink to open (string).

Send a custom event

This method sends a custom event.

SRInApp.trackCustomEvent(action, params, label)

action is the event’s action name (string) in the context.action format, for example page.visit. The maximum length is 32 characters.
params is an object with free-form JSON parameters to send with the event.
label is a string with a human-readable summary of the event. It is obligatory, but not saved in persistent storage and can’t be used in Analytics and is not displayed in the Profiles module.

Trigger a custom action

This method allows you to pass data to a custom action. You must create logic in your mobile application to perform the action, which is triggered when a Listener/Callback processes the JS method and returns the name and parameters of the custom action. The method generates an inApp.customHook event.

SRInApp.handleCustomAction(name, params)

name is used as the identifier that triggers a logic associated with it.
params is an object with free-form JSON parameters to pass to the logic.

Template editing simplification

To make your template more accessible to users without programming skills, you can add a configuration form with variables dedicated for the template, so the user can make adjustments to the template.

The effect of template editing simplification is that you can edit templates by filling out a user-friendly configuration form (available in the Config tab) whose fields define the value for each property of the template.

The process of template simplification involves replacing values with variables in the HTML, CSS, and JavaScript code elements, such as alignment, font, color in CSS, or HTML tags as title, description or buttons. You can also add a variable in the place of Jinjava elements, such as a recommendation campaign ID, voucher pool ID, or catalog name. Variables inserted in the code appear in a form the Config tab when editing the template.

List of variables

You can use the following variables:

String - Lets you add a field that requires a string value.
Select - Lets you add a dropdown list with configurable values.
Synerise insert select - Lets you add a dropdown list with aggregates, expressions, metrics, voucher pools, and recommendations.
Switch - Lets you add a field which is enabled/disabled by a toggle.
Color - Lets you add a color selector. You can either select a color or enter its code manually.
Number - Lets you add a field that requires a number. You can either select a number from a dropdown or enter it manually.

While inserting a variable in the code, you must define the ID of the variable, select the type of the variable (if you chose the Select type, you must define the scope of values available in the dropdown) and define a default value. Optionally, you can add a label and description.

Results of simplifying template editing

Instead of modifying the design of the template directly in the code, a user can go to the Config tab and define the properties of the template by filling out configuration form.

The image below presents the easy-to-edit form that lets users without coding expertise change the variable values:

Defining the settings of a string variable

Adding a variable

Select one of the following tabs: HTML, CSS, JavaScript.
Find a property to which you want to add a variable.
On the right side, click Variable.
Result: A sidebar appears.
In the Identifier field, enter the ID of the variable.
This will be the title of the field unless you define the Label field.
From the Type dropdown list, select the type of variable.
Lets you add a field that requires a string value.

In the Label (Optional) field, enter the name of the field.
If this field is empty, the name of the field will be taken from the Identifier field.

In the Description (Optional) field, enter a short explanation of the field’s purpose.

In the Default Value field, enter the default value.
Lets you add a dropdown list with configurable values.

In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.

In the Description (Optional) field, enter a short explanation what this field is for.

In the Display Name field, enter the name that will be visible in a dropdown.

In the Value field, enter a value.

In the Default Value field, enter the default value.
Lets you add a dropdown list with aggregates, expressions, metrics, voucher pools, and recommendations.

In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.

In the Description (Optional) field, enter a short explanation what this field is for.

From the Insert Type dropdown list, select one of the following options: Aggregates, AI Recommendations, Expressions, Metrics, Voucher pools.
As a result, in the configuration form, you will be able to select a particular object (for example, an aggregate) from a dropdown list.

In the Default Value (Optional) field, enter the default value.
Result: A dropdown with the insert is added to the form in the Config tab. From the dropdown list, you can select an item of the chosen type (for example, aggregates). As a result, the value of variable will be ID of the selected item.
Synerise insert select in the configuration form
Lets you add a field which is enabled/disabled by a toggle.

In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.

In the Description (Optional) field, enter a short explanation what this field is for.

In the Default Value field, select the default value (true/false).
Lets you add a color selector. You can either select a color or enter its code manually.

In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.

In the Description (Optional) field, enter a short explanation what this field is for.

In the Default Value field, enter the default value.
Lets you add a field that requires a number. You can either select a number from a dropdown or enter it manually.

In the Label (Optional) field, enter the name of the field. If this field is empty, the name of the field will be taken from the Identifier field.

In the Description (Optional) field, enter a short explanation what this field is for.

In the Default Value field, enter the default value.
A select variable during configuration
Optionally, to modify the order of variables appearing in the configuration form, add the order parameter to the variable formula (for example, #### type: "string", id: "string", label: "Text", order: 1 !####).
In the upper right corner, click Add.
Result: In the template code a variable will appear (it starts with ####)

Previewing templates

To check the preview of the template for a particular customer or a product, click the Preview button on the upper left side.
Enter the ID of a customer or a product.
Click Apply.