Show Developer Menu

Reamaze Cues

Introduction

Reamaze Cues are a great way to engage your site visitors automatically based on certain rules and criteria. For example, Reamaze Cues lets you to prompt your site visitors to check out a new product, or to send them a coupon code as they are about to leave your site, or to just notify them that a sale is happening.

Prerequisite

Before you get started, make sure you have the Reamaze.js snippet installed from the Installation Step. The position and color theme of each Cue will also be based off your Trigger Customization settings that you've set up.

Creating a Cue

You can use our Cue Builder in your Reamaze Admin's Settings page, or you can build out the Cue manually and paste the code in your site's HTML, above or below any existing Reamaze.js customization code.

Here's an example of the code that is used to generate the Cue in the image above.

<script type="text/javascript">
  var _support = _support || { 'ui': {}, 'user': {} };
  _support.outbounds = _support.outbounds || [];
  _support.outbounds.push({
    id: "cart-checkout-sale",
    name: "Cart Checkout Sale",
    message: "Hey there, we noticed you have 3 items in your cart.\n\nOur Spring Sale ends soon, so hurry and check out now and get 40% off your order πŸ˜ƒ",
    user: {
      type: "team"
    },
    buttons: [
      {
        text: "Checkout",
        url: "https://www.daffywidgets.com/checkout",
      },
    ],
    rules: [
      {
        type: "leavingSite",
        op: "isTrue",
      },
      {
        type: "url",
        op: "contains",
        value: "/products",
      },
    ],
    transient: false,
  });
</script>

The above Cue code prompts the site user to checkout when they are on the product page and is about to leave the site. The id parameter is used as an identifier for a Cue and Reamaze.js will only show a Cue once to the user per id.

Here is a list of parameters that define a Cue:

Parameter Required Description
id βœ“ The unique identifier for the Cue
message βœ“ Message to show in the Cue.
Note: HTML is not supported at this time.
user βœ“

The user that is shown on the Cue. This is an object with the following parameters:

  • type: The type of user - team, staff or custom
  • name: Name to display on the Cue (only applies for staff or custom types).
  • staffName: Name of staff user avatar to load. Must match a full staff name in the account. (only applies for staff type)
  • avatarUrls: An array of avatar URLs (max 3) to show on the Cue (only applies for custom type).

buttons

Add buttons to your Cue that either redirect to a URL or run custom javascript code. This is an array of button objects, and you can add any number of buttons to your Cue.

  • text: The text to show on the button.
  • url: If set, this is the URL that the user will be sent to (in a new window) when this button is clicked.
  • target: If set, this is the target window of the URL parameter. Defaults to _blank which opens a new window. Consider using _top if you want the URL to open in the same browser window. Not applicable unless url is provided.
  • script: Custom javascript code to run when the button is clicked.
  • response: If set to true then clicking the button will send text as an immediate message response. Useful for making cue buttons act like quick responses.
  • dismiss: If set to true then clicking the button will close the Cue.

Note: When a plurality of script, url, response, or dismiss are set, they will be prioritized in that order and only one will apply.

rules

You can automate Cues based on Rules, which are some preset criteria that Reamaze.js checks for before showing the Cue to the user. This is an array of rule objects, which have the following parameters. You can learn more about Rules we have available here.

  • type: The type of rule. See here for a list of available rules.
  • op: The operator to evaluate the Rule with. See here for a list of available operators.
  • value: The value to evaulate the Rule against.
transient

By default, Cues are not transient. That means that once a Cue is triggered, it shows on all page loads until the user acts on the Cue (clicks in to the Cue or closes it). However, if you only want a Cue to be shown once to a user and not on subsequent page loads regardless of user interaction with the Cue, set the transient value to true

Next Step

Reamaze Cues comes packaged with a set of rules that you can use to conditionally display a Cue to the user, which we'll list out and describe on our next step.

Next: Automated Rules β†’