Snippets

A snippet in Synerise is a reusable piece of code that can be added to any content created in Synerise, such as in-app messages, landing pages, the request body of Outgoing Integrations, documents, and more.

A snippet can represent a content fragment that is frequently used, like a sentence, an email footer, but can also be used to create an entire message template. It can be added in two ways:

  • As a dynamic reference to the snippet definition. In this case, the content is updated whenever the definition changes. This approach lets you propagate changes into multiple templates, documents, and so on without editing all of them separately.
    A simple example is storing your company address in a snippet and creating a reference to that snippet when you want to show the address in a template. If the address changes, you only need to edit the snippet and the change will apply to all the templates with a reference to it.
  • As a static fragment of content pasted into the code editor.

You can create your own snippets and use a library of pre-defined snippets.

To add a snippet to the content you’re creating, use the snippet widget.

Using snippet widget

The snippet widget lets you access the collection of predefined and custom snippets available across the Synerise platform, providing quick access to a variety of useful code sections.

You can find the snippet widget in features which lets you create any type of content: message templates, landing page, documents, message subject, body requests in Automation.

Snippet widget lets you perform the following actions:

  • Add a snippet to your content
  • Create a new snippet
  • Manage snippets
  • Preview snippet contents
  1. To open the snippet widget, in a code editor, click Snippets.
    Result: At the bottom of the page, the snippet manager appears.
    Snippet manager
    Snippet manager
  2. To change the view mode of the snippet widget:
    • In compact mode, click Settings icon to change to wide mode.
    • In wide mode, click Settings icon to change to compact mode.
      The screenshots in this article show the compact mode.
  3. From the list, you can:
    • Add a snippet - By selecting this option, you will be redirected to the snippet editor.
    • Manage snippets - By selecting this option, you will be redirected to the list of snippets.
    • Select a predefined or custom snippet to add to the content you’re editing.

Inserting snippets

If you want to add a snippet to the content you’re editing:

  1. In the code editor view, open the snippet widget by clicking Snippets.

  2. Select a category of snippets:

    Tip: You can use the search field at the top of the widget to search for snippets by name.

    • Custom snippets
      To access your custom snippets, scroll to the end of the list.
    • Predefined snippets defined by Synerise:
      • Profile data: add profile attributes, recommendations, promotions, aggregate results, and expression results.
      • Analytics: insert the results of metrics.
      • Data management: add values of vouchers, catalog items, or files.
      • Other: add Jinjava inserts and links.
        New predefined snippets are added to the platform periodically.

  3. After opening a category, select a snippet from one of the types:

    • Configurable snippets require selecting some additional options. For example, a configurable recommendation insert allows you to modify the filters.
    • Ready to use snippets let you refer to a Synerise object without any additional configuration. For example, in the “Expressions” category, the “Ready to use” list is a list all expressions in your workspace. Selecting this snippet will let you show the result of the expression in the content.
      Result:
      The snippet details open.
    Details of a ready-to-use snippet
    Details of a ready-tu-use snippet

  4. If you selected a configurable snippet, follow the instructions in the snippet details to configure it.

  5. Select how you want to use the snippet:

    Copying snippets options
    Options of using the snippet
    • To paste the contents of the snippet into the editor, click Use snippet.
      This content won’t change when the snippet definition changes.
    • To copy the content of the snippet into the clipboard, click Copy code.
      This content won’t change when the snippet definition changes.
    • To create a dynamic reference to the snippet definition, click the arrow to the right of Copy code and click Copy snippet reference.
      This copies the snippet reference to your clipboard. You need to paste it into the editor.
      A snippet reference creates a piece of content that will be updated whenever you update the definition of the snippet. In the editor, it looks like this: 
      {% snippet %} SNIPPET_ID {% endsnippet %}
      This is useful for content that changes often and is used in multiple communications. By using a reference, you only need to update the central definition and the change applies to all references.
      If the referenced snippet uses variables for editing simplification, a reference always uses the default variable values and doesn’t allow changing them.
      Snippet references are not available for some snippet types. For example, ready-to-use expression references - because the snippet is only a reference to an expression, changing the expression propagates to all content which refers to it.

Creating custom snippets

You can create custom snippets using the snippet editor. This editor lets you write the snippet code in which you can, for example, reference Synerise objects or other snippets. Additionally, you can create configuration forms to simplify their editing for your co-workers. This enables you to configure the snippet when adding it to the template from the snippet widget.

  1. Go to Data Management > Data Management > Snippets > Create snippet.

    Snippet editor
    Snippet editor

  2. To select the language for syntax highlighting, click HTML and from the dropdown list, select:

    • Text
    • JSON
    • HTML
    • CSS
    • Javascript
    • SQL

  3. In the Code section, enter the contents of the snippet. You can:

    • create code from scratch,
    • by using the Snippets option, you can add existing snippets and configure them with the snippet widget. In the screen below, an expression snippet is being added to the snippet. In such case, from the Select expression dropdown list, you must select which expression result you want to retrieve.
      This option also lets you add your custom snippets as well.
      Adding predefined snippet
      Adding predefined snippet which retrieves result of an expression result
    • create a form for editing snippets,
    • preview the final result from the perspective of a customer.

  4. After you complete a snippet, in the upper right corner, click Save.
    Result: A pop-up appears.
     

    Save snippet pop-up
    Saving a snippet

    1. In the Snippet name, enter a name of the snippet which will be visible on the snippet list.
    2. In the Description field, write the purpose of a snippet to make it understandable for your co-workers.
    3. From the Directory list:
      • select a category in which the snippet will be saved.
      • to create a new category, at the bottom of the list, click Create new.
        1. In the Directory name field, enter the name of the category.
        2. Confirm by clicking Apply.
    4. Click Apply.
      Result: The snippet is available in snippet widget.

Previewing snippets

You can check the final form of a snippet from the perspective of any customer you have in your database.

  1. In the code editor, on the left, click Preview contexts.
    Result: A pop-up opens.
  2. From the Customer Context dropdown list:
    • select the customer from the list
    • use the searchbox to find a customer by typing their email address or ID
      Result: A preview modifies to the context of a selected customer.

Snippet editing simplification

To make it easier for non-coders to customize a snippet, you can create a form with specific options just for the snippet. This way, users can define the settings of the snippets (such as selecting recommendations to be displayed) by filling out the form displayed in the widget before using it in the content.

When you simplify the editing process for the template, you can tweak its style by using a simple form with different fields for each part of the template. This form can be found in the Config section.

Simplifying the template involves swapping out values in the code (like HTML, CSS, and JavaScript) with special placeholders called variables. For example, you can change alignment, fonts, colors, or HTML elements like titles, descriptions, or buttons. You can also insert variables in place of Jinjava elements, such as campaign IDs, voucher pool IDs, or catalog names. These variables will be visible in the form within the Config tab when you are editing the template.

Important: When a snippet with variables added as described below is inserted as a reference, all fields in the output use the default value. The value can’t be changed. See example.

Example

This is how simplified snippets work in practice:

  1. A snippet with two variables is created:
    Variables in the snippet editor
  2. A user opens the snippet in the widget when creating something in a code editor (for example, an email template):
    The snippet opened in the widget
  3. In the configuration form, the user changes the values from default to their own:
    The snippet after a user changes the values
  4. The result depends on how the user adds the snippet to the content they’re creating:
    • If the user clicks Use snippet/Copy code, the contents of the snippets are added to the editor/copied to the clipboard with the variable values entered in the configuration form: The snippet added into the code editor with the user's values
    • If the user clicks Copy snippet reference, a reference to the snippet is copied to the clipboard. When the content is generated, the default values are always used, regardless of what the user entered in the configuration form: The snippet reference and a preview of its results (left pane)

List of variables

Variable name Description Example output
Synerise insert select Allows you to add a dropdown list with aggregates, expressions, metrics, voucher pools, recommendations, files, catalogs, or attributes.
A field in the Config tab requiring a selection of a Synerise object
Example: selecting a Synerise object from the list
String Allows you to add a field that requires a string value.
A field in the Config tab requiring a string value
Example: Filling out a field
Select Allows you to add a dropdown list with configurable values.
A field in the Config tab requiring a selection from a dropdown
Example: selecting an option from a dropdown list
Switch Allows you to add a field which is enabled/disabled by a toggle.
A field in the Config tab requiring a selection of a Synerise object
Example: enabling an option
Color Allows you to add a color selector. You can either select a color or enter its code manually.
A field in the Config tab requiring a selection of a color
Example: selecting a color
Number Allows you to add a field that requires a number. You can either select a number from a dropdown or enter it manually.
A field in the Config tab requiring a number value
Example: defining a number

Creating a simplified snippet

  1. To create a user-friendly configuration form of the snippet, in the Code tab, on the right side of the screen, click Add variable.
    Result: A sidebar appears.

    Adding a variable
    Adding a variable

  2. In the Identifier field, enter the ID of the variable.
    This will be the title of the field unless you define the Label field.
    The first character of the ID can’t be a number.

  3. From the Type dropdown list, select the type of variable.
    Description of available variables is in List of variables.

    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.
      This value is also used when the snippet is used a reference. In that case, the value can’t be changed.

  4. If you want to add the variable to a group that can be more easily displayed together in the form:

    1. Click Variable Group.
    2. Select or create a group:
      • To select a group, click its name.
      • To create a group:
        1. Click Add new group.
        2. Enter a group name.
        3. Enter a group ID.
        4. Click Apply.
          Result: On the Config tab, the groups can be collapsed and expanded.

  5. In the upper right corner, click Add.
    Result: In the template code, a variable appears (it starts with ####). It also becomes available on the Config tab.

  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 !####).

😕

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