Using mobile push code editor

The code editor allows you to:

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 contents of a cart), and the results of aggregates, expressions, and metrics.

You should become familiar with the prerequisites before creating a push notification template.

Opening the code editor


  1. Go to Image presents the Communication icon Communication > Mobile.
  2. On the left pane, select Templates.
  3. In the upper right corner, click New Template.
  4. Select the push notification type:
    • Simple Push - a notification that is displayed in the main screen of a mobile device. Simple push messages appear in the notification center on mobile devices when the screen is locked or they are visible in the top bar when the screen is unlocked.
    • Silent push - a hidden notification that is delivered to the app on a user’s device. Unlike a typical push, it does not cause any interaction with the user. Silent notifications quietly deliver a certain set of data to the app. This is a great solution for letting apps know about changes in content.
  5. On the pop-up, select Code editor.

Creating a template


An mobile push code editor
A mobile push code editor
  1. Use the JSON tab to define the properties of the template.
  2. When the template is ready, in the upper right corner click Save this template > Save as.
  3. 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 to 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.

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

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 JSON elements, such as title, description or priority. You can also add a variable in the place of Jinjava elements, such as a recommendation campaign ID or voucher pool ID. 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 - Allows you to add a field that requires a string value.
  • Select - Allows you to add a dropdown list with configurable values.
  • Synerise insert select - Allows you to add a dropdown list with aggregates, expressions, metrics, voucher pools, and recommendations.
  • Switch - Allows you to add a field which is enabled/disabled by a toggle.
  • Color - Allows you to add a color selector. You can either select a color or enter its code manually.
  • Number - Allows you to 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
Defining the settings of a string variable

Adding a variable

  1. Select the JSON tab.

  2. Find a property to which you want to add a variable.

  3. On the right side, click Inserts.
    Result: A sidebar appears.

  4. In the Identifier field, enter the ID of the variable.
    This will be the title of the field unless you define the Label field.

  5. From the Type dropdown list, select the type of variable.

    Allows you to add a field that requires a string value.

    1. 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.
    2. In the Description (Optional) field, enter a short explanation of the field’s purpose.
    3. In the Default Value field, enter the default value.

    A select variable
    A select variable during configuration
  6. 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 !####).

  7. In the upper right corner, click Add.
    Result: In the template code a variable will appear (it starts with ####)

Previewing templates

If your template contains dynamic elements (Jinjava), their result will be different for every user. The preview in the builder lets you define the user identifier and the Jinjava tags/inserts will be rendered specifically for that user.

  1. To check the preview of the template for a particular profile, click the Preview contexts button on the upper left side.
  2. Enter the ID of a profile.
  3. Click Apply.
😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

Close modal icon Placeholder alt for modal to satisfy link checker