Reamaze

https://www.reamaze.com/developer
Admin
Reamaze is a comprehensive customer support platform providing shared inboxes, live chat, chatbots,...
Tokens:21,206
Snippets:241
Trust Score:9.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Basic Shoutbox

Source: https://www.reamaze.com/developer/widget_basic

Enables the standard help shoutbox widget for customer communication.

```javascript
<script type="text/javascript">
  _support['ui']['widget'] = true;
</script>
```

--------------------------------

### Base Reamaze.js Installation

Source: https://www.reamaze.com/developer/widget

Include this script tag in your HTML, preferably near the bottom of the page, to load the Reamaze.js SDK.

```html
<script type="text/javascript" async src="https://cdn.reamaze.com/assets/reamaze.js"></script>

```

--------------------------------

### Define a Reamaze Cue with Rules

Source: https://www.reamaze.com/developer/cues_rules

This example shows how to define a Cue object with multiple rules. The Cue will display when both the time on page condition and the URL condition are met.

```javascript
{
  id: "cue-rules-test",
  message: "This Cue is displayed once the user has been on the page for longer than 1 minute and if the URL matches '/pricing'.",
  rules: [
    {
      type: "timeOnPage",
      op: "greaterThan",
      value: "1m"
    },
    {
      type: 'url',
      op: 'contains',
      value: '/pricing'
    }
  ]
}
```

--------------------------------

### Install Re:amaze User Authentication Script

Source: https://www.reamaze.com/developer/widget_auth

Include this script in your HTML to pass customer data for authentication. Replace placeholders with your customer's unique identifiers and authentication key.

```html
<script type="text/javascript">
  _support['user'] = {
    id: '{{ CUSTOMER USER ID }}',
    email: '{{ CUSTOMER EMAIL }}',
    name: '{{ CUSTOMER NAME }}',
    phone: '{{ CUSTOMER PHONE }}',
    authkey: '{{ AUTHENTICATION KEY }}'
  }
</script>

```

--------------------------------

### Generate Re:amaze Authkey in NodeJS

Source: https://www.reamaze.com/developer/widget_auth

This NodeJS example shows how to generate the authentication key using CryptoJS library for HMAC-SHA256.

```javascript
CryptoJS.HmacSHA256(user.id + ":" + user.email, "{{ YOUR SSO SECRET }}");
```

--------------------------------

### Create a Push Prompt

Source: https://www.reamaze.com/developer/campaigns_push_prompts

Use this JavaScript snippet to manually create a Push Prompt. Configure the name, message, delay, and button actions. Ensure the Reamaze.js snippet is installed prior to implementation.

```javascript
var _support = _support || { 'ui': {}, 'user': {} };
_support['account'] = "example";
_support['ui']['push_prompt'] = {
  name: "Never miss out on a sale!",
  message: "Sign up for updates!",
  delay: 24,
  buttons: [
    {
      text: "Allow",
      pushprompt: true
    },
    {
      text: "Dismiss",
      dismiss: true
    },
  ]
};

```

--------------------------------

### Configure Anonymous Guest Mode

Source: https://www.reamaze.com/developer/widget_anonymous

Set the contact mode for the Reamaze UI to enable anonymous messaging. Requires the Reamaze.js snippet to be installed first.

```html
<script type="text/javascript">
  _support['ui']['contactMode'] = '{{ MODE }}'
</script>
```

--------------------------------

### Implement Custom Tracking Callback

Source: https://www.reamaze.com/developer/analytics

Define the analytics_track_callback function to intercept event data. Ensure the Reamaze.js snippet is installed before implementation.

```javascript
<script type="text/javascript">
  _support['analytics_track_callback'] = function(data) {
    // your code here.
  }
</script>
```

--------------------------------

### Configure Custom Form Fields

Source: https://www.reamaze.com/developer/widget_fields

Define custom fields by adding the _support['custom_fields'] object to your Reamaze.js installation. Ensure the Reamaze.js snippet is already initialized before defining these fields.

```javascript
<script type="text/javascript">
  _support['custom_fields'] = {
    // this is an example of hidden data sent with the message
    hidden_value: {
      type: "hidden",
      value: "anything you want",
      pos: 1
    },

    // this is an example of a dropdown with options that the user can select from
    dropdown_value: {
      type: "dropdown",
      value: ["Value 1", "Value 2", "Value 3"],
      placeholder: "Placeholder prompt",
      pos: 2
    },

    // this is an example of a free form text field
    order_no: {
      type: "text",
      value: "Default Value",
      placeholder: "Placeholder prompt",
      required: true,
      pos: 3
    },

    // this is an example of a checkbox field
    subscription_agree: {
      type: "checkbox",
      value: true,
      placeholder: "Please add me to your newsletter",
      required: false,
      pos: 4
    },

    // this is an example of a heading field
    heading_1: {
      type: "heading",
      value: "Please fill in all the fields above.",
      pos: 5
    }
  };
</script>
```

--------------------------------

### Embed Contact Form

Source: https://www.reamaze.com/developer/widget_form

Basic implementation of the inline contact form. Requires the Reamaze.js snippet to be installed.

```html
<div data-reamaze-embed="contact"></div>
```

--------------------------------

### Set Default Custom Fields for Re:amaze

Source: https://www.reamaze.com/developer/widget_fields

Use `_support['custom_fields']` to define default fields for Re:amaze embeds. This example includes a hidden field for cookie status and a dropdown for color selection.

```javascript
<script type="text/javascript">
  _support['custom_fields'] = {
    cookies_enabled: {
      type: "hidden",
      value: window.navigator.cookieEnabled
    },
    dropdown_value: {
      type: "dropdown",
      value: ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"],
      placeholder: "What's your favorite color?"
    }
  };
</script>
```

--------------------------------

### Channels API

Source: https://www.reamaze.com/developer

Endpoints for retrieving and getting specific channels.

```APIDOC
## GET /api/channels

### Description
Retrieves a list of channels.

### Method
GET

### Endpoint
/api/channels

### Response
#### Success Response (200)
- **channels** (array) - A list of channel objects.

#### Response Example
{
  "channels": [
    {
      "id": 1,
      "name": "Email"
    }
  ]
}

## GET /api/channels/{id}

### Description
Retrieves a specific channel by its ID.

### Method
GET

### Endpoint
/api/channels/{id}

### Parameters
#### Path Parameters
- **id** (integer) - Required - The ID of the channel to retrieve.

### Response
#### Success Response (200)
- **channel** (object) - The requested channel object.

#### Response Example
{
  "channel": {
    "id": 1,
    "name": "Email"
  }
}
```

--------------------------------

### Open Specific FAQ Topic or Article

Source: https://www.reamaze.com/developer/widget_lightbox_kb

Use the data-kb-url attribute to specify the path of the article or topic you want the lightbox to load.

```html
<a href="#" data-kb-url="/kb/topic/article">Click here</a>
```

--------------------------------

### Initialize FAQ Lightbox in Self Service Mode

Source: https://www.reamaze.com/developer/widget_lightbox_kb

Use the data-reamaze-lightbox attribute set to 'kb' to display your FAQ articles and search functionality upon trigger.

```html
<a href="#" data-reamaze-lightbox="kb">Click here</a>
```

--------------------------------

### Enable Self-Service Mode

Source: https://www.reamaze.com/developer/widget_basic

Configures the shoutbox to display FAQ articles and search functionality before allowing contact.

```javascript
<script type="text/javascript">
  _support['ui']['widget'] = true;
  _support['ui']['lightbox_mode'] = "kb";
</script>
```

--------------------------------

### Configure Push Prompt

Source: https://www.reamaze.com/developer/campaigns_push_prompts

Defines the structure and parameters for initializing a Push Prompt via the Reamaze.js snippet.

```APIDOC
## Configuration: Push Prompt

### Description
Configures the Push Prompt UI component to encourage visitors to enable push notifications.

### Parameters
#### Request Body
- **name** (string) - Required - The header displayed on the Push Prompt.
- **message** (string) - Required - Message body displayed in the Push Prompt (HTML not supported).
- **delay** (number) - Required - Number of hours to wait before re-displaying the prompt after dismissal.
- **buttons** (array) - Required - An array of two objects defining the action buttons.
  - **text** (string) - The text to show on the button.
  - **pushprompt** (boolean) - If true, clicking triggers the browser push permission request.
  - **dismiss** (boolean) - If true, clicking dismisses the prompt.

### Request Example
```javascript
_support['ui']['push_prompt'] = {
  name: "Never miss out on a sale!",
  message: "Sign up for updates!",
  delay: 24,
  buttons: [
    {
      text: "Allow",
      pushprompt: true
    },
    {
      text: "Dismiss",
      dismiss: true
    }
  ]
};
```
```

--------------------------------

### Pre-fill Customer Name and Email with Weak SSO

Source: https://www.reamaze.com/developer/widget_auth

Use this script to pre-fill the name and email fields on Re:amaze shoutbox and lightbox contact forms. This method does not grant access to conversation history and is useful when `authkey` generation is difficult.

```javascript
<script type="text/javascript">
  _support['user'] = {
    email: '{{ CUSTOMER EMAIL }}',
    name: '{{ CUSTOMER NAME }}',
  }
</script>
```

--------------------------------

### Embed Conversation History - HTML

Source: https://www.reamaze.com/developer/widget_conversations

Place this HTML element anywhere on your site to render the inline embedded conversation history. Ensure Reamaze.js is installed and Auth & SSO is implemented.

```html
<div data-reamaze-embed="conversations"></div>

```

--------------------------------

### Open Specific Help Article Lightbox

Source: https://www.reamaze.com/developer/widget_engage

Force Reamaze to open a specific help article within a lightbox by providing its URL path. This is useful for programmatically opening articles based on user state.

```javascript
Reamaze.popup("/kb/topic/article");
```

--------------------------------

### Generate Re:amaze Authkey in Python

Source: https://www.reamaze.com/developer/widget_auth

Generate the authentication key in Python using the `hmac` and `hashlib` modules.

```python
hmac.new("{{ YOUR SSO SECRET }}", user.id + ":" + user.email, hashlib.sha256).hexdigest()
```

--------------------------------

### Resize Custom Module Iframe

Source: https://www.reamaze.com/developer/module

Use postMessage to communicate the content height to the parent window, ensuring the iframe displays correctly within the Re:amaze interface.

```javascript
<script type="text/javascript">
  window.onload = function() {
    window.parent.postMessage({
      message: 'reamaze:resize',
      height: document.body.scrollHeight
    }, "*");
  };
</script>
```

--------------------------------

### Re:amaze Initialization Event Listener

Source: https://www.reamaze.com/developer/widget_engage

Listen for the 'Reamazeinit' CustomEvent to trigger callbacks on your website only after Re:amaze has been initiated. A flag must be set if calling Reamaze.reload() within your triggered code, as this event emits on every load.

```javascript
document.addEventListener("Reamazeinit", function() {
    // callback code
});
```

--------------------------------

### Generate Re:amaze Authkey in PHP

Source: https://www.reamaze.com/developer/widget_auth

Use this PHP code to generate the authentication key by hashing user ID and email with your SSO secret.

```php
hash_hmac('sha256', $user->id . ':' . $user->email, '{{ YOUR SSO SECRET }}')
```

--------------------------------

### Set Customer Avatar via SSO

Source: https://www.reamaze.com/developer/widget_auth

Add this script to your HTML to synchronize customer avatars between your application and Re:amaze. Ensure the provided URL points to a publicly accessible image.

```html
<script type="text/javascript">
  _support['user']['avatar'] = '{{ AVATAR URL }}'
</script>

```

--------------------------------

### Custom Field Configuration Schema

Source: https://www.reamaze.com/developer/widget_fields

General structure for defining individual custom fields within the configuration object.

```javascript
key: {
  type: "{hidden|dropdown|text|checkbox}",
  value: "{string for hidden and text types; array of strings for dropdown; true/false for checkbox}",
  placeholder: "{string for prompt, label, or placeholder value}",
  required: {true|false},
  pos: {integer for position of this field in the contact form. Lower position are shown first.}
}
```

--------------------------------

### Re:amaze Event Listener

Source: https://www.reamaze.com/developer/widget_engage

This section describes how to use the custom event listener `"Reamazeinit"` to trigger a callback on your website only after Re:amaze has been initiated. A flag must be set if calling `Reamaze.reload()` within the triggered code.

```APIDOC
## Re:amaze Event Listener

### Description
If you need to trigger a callback on your website only after Re:amaze has been initiated, you can listen for the custom event, `"Reamazeinit"`. This event is emitted on every load. If calling `Reamaze.reload()` anywhere in your triggered code, a flag must be set.

### Usage

```javascript
document.addEventListener("Reamazeinit", function() {
    // callback code
});
```
```

--------------------------------

### Configure a Reamaze Cue

Source: https://www.reamaze.com/developer/cues_intro

Defines a new Cue by pushing an object to the _support.outbounds array. The id parameter ensures the Cue is shown only once per user.

```javascript
<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>
```

--------------------------------

### Targeting Specific Channels

Source: https://www.reamaze.com/developer/widget_lightbox

Force the lightbox to open a conversation in a specific support channel by providing the Channel ID.

```html
<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-channel="{{ CHANNEL }}">Your Site's Custom Trigger</a>
```

--------------------------------

### Creating a Cue

Source: https://www.reamaze.com/developer/cues_intro

Defines the structure and parameters for creating a new Cue using the Reamaze.js library.

```APIDOC
## JavaScript Configuration: Reamaze Cues

### Description
Configures a new Cue by pushing a configuration object to the `_support.outbounds` array. Cues are triggered based on defined rules and user behavior.

### Parameters
- **id** (string) - Required - Unique identifier for the Cue. Reamaze.js shows a Cue only once per ID.
- **message** (string) - Required - The text content of the Cue. HTML is not supported.
- **user** (object) - Required - Defines the sender of the Cue.
  - **type** (string) - Required - 'team', 'staff', or 'custom'.
  - **name** (string) - Optional - Display name for 'staff' or 'custom' types.
  - **staffName** (string) - Optional - Full staff name for avatar loading (only for 'staff' type).
  - **avatarUrls** (array) - Optional - List of avatar URLs (max 3) for 'custom' type.
- **buttons** (array) - Optional - List of button objects.
  - **text** (string) - Button label.
  - **url** (string) - Redirect URL.
  - **target** (string) - Window target (defaults to '_blank').
  - **script** (string) - Custom JS to execute on click.
  - **response** (boolean) - If true, sends button text as a message response.
  - **dismiss** (boolean) - If true, closes the Cue on click.
- **rules** (array) - Optional - Criteria for displaying the Cue.
  - **type** (string) - Rule type.
  - **op** (string) - Operator.
  - **value** (string) - Value to evaluate.
- **transient** (boolean) - Optional - If true, shows only once regardless of interaction.

### Request Example
<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.",
    user: { type: "team" },
    buttons: [{ text: "Checkout", url: "https://www.daffywidgets.com/checkout" }],
    rules: [{ type: "leavingSite", op: "isTrue" }],
    transient: false
  });
</script>
```

--------------------------------

### Lightbox Integration

Source: https://www.reamaze.com/developer/widget_lightbox

Integrate the Reamaze support lightbox into your website to allow customers to contact you.

```APIDOC
## Lightbox Integration

### Description
Integrate the Reamaze support lightbox into your website to allow customers to contact you, creating new conversations in your Reamaze support channel.

### Installation
Ensure the Reamaze.js snippet is installed on your site.

### Basic Integration
Place an HTML element with the `data-reamaze-lightbox` attribute to trigger the support lightbox.

```html
<a href="#" data-reamaze-lightbox="default">Click here</a>
```

### Lightbox Modes
Control the lightbox content using the `data-reamaze-lightbox` attribute:
- `default`: Default behavior.
- `faq`: Shows the FAQ.
- `contact`: Shows the new conversation/chat page.

```html
<a href="#" data-reamaze-lightbox="faq">Open FAQ Lightbox</a>
```

### Anonymous Guest Mode
Allow guests to leave messages without requiring name and email fields.

### Customizing Lightbox Width and Height
Adjust the lightbox dimensions using `data-reamaze-lightbox-width` and `data-reamaze-lightbox-height` attributes. Defaults are 650px width and 400px height (non-mobile).

```html
<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-width="{{ CUSTOM_WIDTH }}" data-reamaze-lightbox-height="{{ CUSTOM_HEIGHT }}">Your Site's Custom Trigger</a>
```

### Forcing Messages to a Specific Channel
Specify a channel for messages using `data-reamaze-lightbox-channel`.

```html
<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-channel="{{ CHANNEL }}">Your Site's Custom Trigger</a>
```

### Specifying Contact Modes
Control the contact form behavior with `data-reamaze-lightbox-contact-mode`:
- `default`: Require name and email.
- `anonymous`: Prompt for email after conversation starts.
- `mixed`: Require name and email only when staff are unavailable.
- `traditional`: Use a traditional contact form with all fields upfront.

```html
<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-contact-mode="{{ MODE }}">Your Site's Custom Trigger</a>
```

### Customizing Lightbox Colors and Text/Language
Personalize the lightbox appearance through Brand Settings in your Reamaze account.

### Custom Contact Form Fields
Add custom fields (text boxes, dropdowns) to the lightbox contact form. See documentation on Custom Form Fields for details.
```

--------------------------------

### Basic Inline FAQ Embedding

Source: https://www.reamaze.com/developer/widget_kb

To embed the FAQ, place this HTML element anywhere on your site. It will automatically be replaced by the inline embedded FAQ.

```html
<div data-reamaze-embed="kb"></div>
```

--------------------------------

### Generate Re:amaze Authkey in Ruby

Source: https://www.reamaze.com/developer/widget_auth

This Ruby code snippet demonstrates how to generate the authentication key using OpenSSL's HMAC-SHA256 function.

```ruby
OpenSSL::HMAC.hexdigest('sha256', '{{ YOUR SSO SECRET }}', "#{user.id}:#{user.email}")
```

--------------------------------

### Enable Notification Style Prompt for Shoutbox Trigger

Source: https://www.reamaze.com/developer/widget_trigger

Change the label mode to 'notification' to enable a more noticeable prompt style. Optionally set the 'sound' attribute to true or false.

```javascript
<script type="text/javascript">
  _support['ui']['widget'] = {
    label: {
      text: 'Thanks for visiting! How can we help? 😊',
      delay: 3,
      mode: 'notification',
      sound: true,
    },
    color: '#e57d58'
  };
</script>
```

--------------------------------

### Staff API

Source: https://www.reamaze.com/developer

Endpoints for retrieving and creating staff users.

```APIDOC
## GET /api/staff

### Description
Retrieves a list of staff users.

### Method
GET

### Endpoint
/api/staff

### Response
#### Success Response (200)
- **staff** (array) - A list of staff user objects.

#### Response Example
{
  "staff": [
    {
      "id": 1,
      "name": "Agent Smith",
      "email": "agent.smith@example.com"
    }
  ]
}

## POST /api/staff

### Description
Creates a new staff user.

### Method
POST

### Endpoint
/api/staff

### Request Body
- **name** (string) - Required - The name of the staff user.
- **email** (string) - Required - The email address of the staff user.

### Request Example
{
  "name": "Agent Jones",
  "email": "agent.jones@example.com"
}

### Response
#### Success Response (200)
- **staff_user** (object) - The newly created staff user object.

#### Response Example
{
  "staff_user": {
    "id": 2,
    "name": "Agent Jones",
    "email": "agent.jones@example.com"
  }
}
```

--------------------------------

### Embed Specific FAQ Topic or Article

Source: https://www.reamaze.com/developer/widget_kb

To display a specific Topic or Article by default instead of the FAQ index, specify its URL using the `data-reamaze-embed-path` attribute.

```html
<div data-reamaze-embed="kb" data-reamaze-embed-path="/kb/topic/article"></div>
```

--------------------------------

### Notification Style Prompt

Source: https://www.reamaze.com/developer/widget_trigger

Enable a notification-style prompt for the Shoutbox trigger by setting the label mode to 'notification'.

```APIDOC
## Notification Style Configuration

### Description
Configure the Shoutbox trigger to display a more noticeable notification-style prompt.

### Parameters
- **label.mode** (string) - Required - Set to "notification" to enable this style.
- **label.sound** (boolean) - Optional - Set to true to play a sound with the notification.

### Request Example
<script type="text/javascript">
  _support['ui']['widget'] = {
    label: {
      text: 'Thanks for visiting! How can we help? 😊',
      delay: 3,
      mode: 'notification',
      sound: true,
    },
    color: '#e57d58'
  };
</script>
```

--------------------------------

### Manually Displaying a Cue

Source: https://www.reamaze.com/developer/cues_advanced

Use the Reamaze.cue() method to programmatically trigger a Cue for a user with custom parameters.

```APIDOC
## Reamaze.cue()

### Description
Manually display a cue to the user via a Reamaze.js API call.

### Parameters
- **id** (string) - Required - Unique identifier for the cue.
- **name** (string) - Required - Display name of the cue.
- **message** (string) - Required - The content message of the cue.
- **user** (object) - Optional - User context object.
- **buttons** (array) - Optional - Array of button objects with text and url.
- **onClickScript** (string) - Optional - JavaScript to execute on click, overrides default shoutbox behavior.
- **sound** (boolean) - Optional - Whether to play sound on display (default: true).
- **transient** (boolean) - Optional - If true, cue shows only once regardless of interaction (default: false).
- **botsEnabled** (boolean) - Optional - Allow chatbots to respond to cue-initiated conversations (default: false).

### Request Example
<script type="text/javascript">
  Reamaze.cue({
    id: "cart-checkout-sale",
    name: "Cart Checkout Sale",
    message: "Hey there, we noticed you have some items in your cart.",
    user: { type: "team" },
    buttons: [{ text: "Checkout", url: "https://www.daffywidgets.com/checkout" }],
    onClickScript: "alert('Cue clicked')",
    sound: false,
    transient: false,
    botsEnabled: false
  });
</script>
```

--------------------------------

### Custom Triggering with Reamaze.js

Source: https://www.reamaze.com/developer/widget_engage

This section explains how to proactively open the Reamaze Shoutbox or Lightbox using client-side JavaScript. It covers opening the default contact lightbox, a specific help article, or a particular conversation.

```APIDOC
## Custom Triggering with Reamaze.js

### Description
This section explains how to proactively open the Reamaze Shoutbox or Lightbox using client-side JavaScript. It covers opening the default contact lightbox, a specific help article, or a particular conversation.

### Prerequisite Code
Make sure you have the Reamaze.js snippet installed from the Installation Step.

### Opening the Default Contact Lightbox

To force Reamaze to open a lightbox at any time, use the `Reamaze.popup()` function without any parameters.

```javascript
Reamaze.popup();
```

### Opening a Specific Help Article

To force Reamaze to open a specific help article within a lightbox, provide the URL path of the KB article as a parameter to `Reamaze.popup()`.

```javascript
Reamaze.popup("/kb/topic/article");
```

### Opening a Specific Conversation

To force Reamaze to open a specific conversation, provide the URL path of the conversation as a parameter to `Reamaze.popup()`. Note that this requires SSO, and the current authenticated user must have permission to view that conversation. This can be combined with the Conversation API for dynamic prompts.

```javascript
Reamaze.popup("/conversation/slug");
```
```

--------------------------------

### Configure Shoutbox Trigger

Source: https://www.reamaze.com/developer/widget_trigger

Customize the Shoutbox trigger widget by modifying the _support['ui']['widget'] object in your HTML.

```APIDOC
## JavaScript Configuration: _support['ui']['widget']

### Description
Customize the appearance, position, and behavior of the Reamaze Shoutbox trigger widget.

### Parameters
- **position** (object) - Optional - CSS-like position values (e.g., {right: "22px", bottom: "22px"}).
- **label** (object) - Optional - Configuration for the trigger label text, delay, duration, mode, and sound.
- **size** (integer) - Optional - The size of the icon in pixels.
- **icon** (string) - Optional - Icon preference: "default", "help", or "chat".
- **color** (string) - Optional - CSS valid color value for the trigger and shoutbox theme.

### Request Example
<script type="text/javascript">
  _support['ui']['widget'] = {
    position: {
      right: "22px",
      bottom: "22px"
    },
    label: {
      text: "Thanks for visiting! How can we help? 😊"
    },
    size: 56,
    icon: "chat",
    color: '#33b7d8'
  };
</script>
```

--------------------------------

### Set Custom Push Tokens

Source: https://www.reamaze.com/developer/campaigns_push_tokens

Override default push tokens by passing a stringified vapid token to the `_support` variable. This is useful if you have collected tokens using your own push keys.

```javascript
var _support = _support || { 'ui': {}, 'user': {} };
_support.ui = _support.ui || {};
_support.ui.pushNotifications = {
  subscribed: true,
  customVapidtoken: "{\"endpoint\":\"https://fcm.googleapis.com/fcm/send/abc\",\"expirationTime\":null,\"keys\":{\"p256dh\":\"def\",\"auth\":\"ghi\"}}"
}
```

--------------------------------

### Open Specific Conversation Lightbox

Source: https://www.reamaze.com/developer/widget_engage

Open a specific conversation in a lightbox by providing its URL path. This requires SSO, and the authenticated user must have permission to view the conversation. It can be combined with the Conversation API for dynamic prompts.

```javascript
Reamaze.popup("/conversation/slug");
```

--------------------------------

### Articles API

Source: https://www.reamaze.com/developer

Endpoints for retrieving, creating, and updating articles in Re:amaze.

```APIDOC
## GET /api/articles

### Description
Retrieves a list of articles.

### Method
GET

### Endpoint
/api/articles

### Response
#### Success Response (200)
- **articles** (array) - A list of article objects.

#### Response Example
{
  "articles": [
    {
      "id": 1,
      "title": "Example Article",
      "body": "This is the content of the article."
    }
  ]
}

## GET /api/articles/{id}

### Description
Retrieves a specific article by its ID.

### Method
GET

### Endpoint
/api/articles/{id}

### Parameters
#### Path Parameters
- **id** (integer) - Required - The ID of the article to retrieve.

### Response
#### Success Response (200)
- **article** (object) - The requested article object.

#### Response Example
{
  "article": {
    "id": 1,
    "title": "Example Article",
    "body": "This is the content of the article."
  }
}

## POST /api/articles

### Description
Creates a new article.

### Method
POST

### Endpoint
/api/articles

### Request Body
- **title** (string) - Required - The title of the article.
- **body** (string) - Required - The content of the article.

### Request Example
{
  "title": "New Article",
  "body": "Content for the new article."
}

### Response
#### Success Response (200)
- **article** (object) - The newly created article object.

#### Response Example
{
  "article": {
    "id": 2,
    "title": "New Article",
    "body": "Content for the new article."
  }
}

## PUT /api/articles/{id}

### Description
Updates an existing article.

### Method
PUT

### Endpoint
/api/articles/{id}

### Parameters
#### Path Parameters
- **id** (integer) - Required - The ID of the article to update.

### Request Body
- **title** (string) - Optional - The new title of the article.
- **body** (string) - Optional - The new content of the article.

### Request Example
{
  "title": "Updated Article Title",
  "body": "Updated content."
}

### Response
#### Success Response (200)
- **article** (object) - The updated article object.

#### Response Example
{
  "article": {
    "id": 1,
    "title": "Updated Article Title",
    "body": "Updated content."
  }
}
```

--------------------------------

### Configuring Contact Modes

Source: https://www.reamaze.com/developer/widget_lightbox

Set the contact form behavior using the data-reamaze-lightbox-contact-mode attribute.

```html
<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-contact-mode="{{ MODE }}">Your Site's Custom Trigger</a>
```

--------------------------------

### Syncing Customer Data Attributes

Source: https://www.reamaze.com/developer/widget_data

Use this snippet to define custom user attributes. Ensure the Reamaze.js snippet and authentication are already configured.

```javascript
<script type="text/javascript">
  _support['user']['data'] = {
    custom_attribute_1: value1,
    custom_attribute_2: value2,
    custom_attribute_3: value3
  };
</script>
```

--------------------------------

### Customizing Lightbox Dimensions

Source: https://www.reamaze.com/developer/widget_lightbox

Adjust the lightbox size on non-mobile devices using width and height attributes.

```html
<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-width="{{ CUSTOM_WIDTH }}" data-reamaze-lightbox-height="{{ CUSTOM_HEIGHT }}">Your Site's Custom Trigger</a>
```

--------------------------------

### Triggering the Re:amaze Lightbox

Source: https://www.reamaze.com/developer/widget_lightbox

Use the data-reamaze-lightbox attribute on any HTML element to open the support lightbox.

```html
<a href="#" data-reamaze-lightbox="default">Click here</a>
```

```html
<a href="#" data-reamaze-lightbox="faq">Open FAQ Lightbox</a>
```

--------------------------------

### Prepopulate Subject Field

Source: https://www.reamaze.com/developer/widget_form

Sets a default subject for the conversation using the data-reamaze-embed-subject attribute.

```html
<div data-reamaze-embed="contact" data-reamaze-embed-subject="default subject"></div>
```

--------------------------------

### Alternative Trigger for Reamaze Shoutbox

Source: https://www.reamaze.com/developer/widget_lightbox

Use this attribute to make a custom lightbox trigger also activate the shoutbox. Ensure the `data-reamaze-lightbox-anchored` attribute is set to `true`.

```html
<a href="#" data-reamaze-lightbox="contact" data-reamaze-lightbox-anchored="true">Your Site's Custom Trigger</a>
```

--------------------------------

### Manually Displaying a Cue

Source: https://www.reamaze.com/developer/notifications_basic

Use the Reamaze.cue() method to manually trigger a Cue notification for a user with custom parameters.

```APIDOC
## Reamaze.cue()

### Description
Manually display a cue to the user via a Reamaze.js API call.

### Parameters
- **id** (string) - Required - Unique identifier for the cue.
- **name** (string) - Required - Display name of the cue.
- **message** (string) - Required - The content message of the cue.
- **user** (object) - Optional - User context object.
- **buttons** (array) - Optional - Array of action buttons.
- **onClickScript** (string) - Optional - Custom script to execute on click.
- **sound** (boolean) - Optional - Whether to play sound (default: true).
- **transient** (boolean) - Optional - If true, shows only once regardless of interaction (default: false).
- **botsEnabled** (boolean) - Optional - Whether chatbots respond to cue conversations (default: false).

### Request Example
<script type="text/javascript">
  Reamaze.cue({
    id: "cart-checkout-sale",
    name: "Cart Checkout Sale",
    message: "Hey there, we noticed you have some items in your cart.",
    user: { type: "team" },
    buttons: [{ text: "Checkout", url: "https://www.daffywidgets.com/checkout" }],
    onClickScript: "alert('Cue clicked')",
    sound: false,
    transient: false,
    botsEnabled: false
  });
</script>
```

--------------------------------

### Brand Identification for Reamaze.js

Source: https://www.reamaze.com/developer/widget

Add this script to your HTML to specify your Re:amaze Brand subdomain. Replace `{{ YOUR_BRAND_SUBDOMAIN }}` with your actual Brand ID found in Account Settings. This step is handled automatically if using Shopify or Magento integrations.

```javascript
var _support = _support || { 'ui': {}, 'user': {} };
_support['account'] = '{{ YOUR_BRAND_SUBDOMAIN }}';

```

--------------------------------

### Customize FAQ Loading Indicator Color

Source: https://www.reamaze.com/developer/widget_kb

Customize the color of the loading indicator for the embedded FAQ by adding the `data-reamaze-embed-loading-color` attribute with a desired color value.

```html
<div data-reamaze-embed="kb" data-reamaze-embed-loading-color="#33b7d8"></div>
```

--------------------------------

### Response Templates API

Source: https://www.reamaze.com/developer

Endpoints for retrieving, creating, and updating response templates.

```APIDOC
## GET /api/response_templates

### Description
Retrieves a list of response templates.

### Method
GET

### Endpoint
/api/response_templates

### Response
#### Success Response (200)
- **templates** (array) - A list of response template objects.

#### Response Example
{
  "templates": [
    {
      "id": 1,
      "name": "Welcome Message",
      "body": "Welcome to our service!"
    }
  ]
}

## GET /api/response_templates/{id}

### Description
Retrieves a specific response template by its ID.

### Method
GET

### Endpoint
/api/response_templates/{id}

### Parameters
#### Path Parameters
- **id** (integer) - Required - The ID of the response template to retrieve.

### Response
#### Success Response (200)
- **template** (object) - The requested response template object.

#### Response Example
{
  "template": {
    "id": 1,
    "name": "Welcome Message",
    "body": "Welcome to our service!"
  }
}

## POST /api/response_templates

### Description
Creates a new response template.

### Method
POST

### Endpoint
/api/response_templates

### Request Body
- **name** (string) - Required - The name of the template.
- **body** (string) - Required - The content of the template.

### Request Example
{
  "name": "Follow Up",
  "body": "Just checking in."
}

### Response
#### Success Response (200)
- **template** (object) - The newly created response template object.

#### Response Example
{
  "template": {
    "id": 2,
    "name": "Follow Up",
    "body": "Just checking in."
  }
}

## PUT /api/response_templates/{id}

### Description
Updates an existing response template.

### Method
PUT

### Endpoint
/api/response_templates/{id}

### Parameters
#### Path Parameters
- **id** (integer) - Required - The ID of the response template to update.

### Request Body
- **name** (string) - Optional - The new name of the template.
- **body** (string) - Optional - The new content of the template.

### Request Example
{
  "body": "Following up on your inquiry."
}

### Response
#### Success Response (200)
- **template** (object) - The updated response template object.

#### Response Example
{
  "template": {
    "id": 1,
    "name": "Welcome Message",
    "body": "Following up on your inquiry."
  }
}
```

--------------------------------

### Require Attachments

Source: https://www.reamaze.com/developer/widget_form

Forces the user to include at least one file attachment with their submission.

```html
<div data-reamaze-embed="contact" data-reamaze-embed-require-attachment="true"></div>
```

--------------------------------

### Deleting Cues

Source: https://www.reamaze.com/developer/notifications_basic

Methods to remove manually created cues from the user interface.

```APIDOC
## Reamaze.removeCue() / Reamaze.removeAllCues()

### Description
Removes cues from the customer's conversation list and notification area.

### Request Example
<script type="text/javascript">
  Reamaze.removeCue($cueId); // delete a single Cue by its id
  Reamaze.removeAllCues(); // delete all Cues
</script>
```

--------------------------------

### Open Reamaze Contact Lightbox

Source: https://www.reamaze.com/developer/widget_engage

Call this function to open the default contact lightbox at any time.

```javascript
Reamaze.popup();
```

--------------------------------

### Status Page Systems API

Source: https://www.reamaze.com/developer

Endpoints for managing systems on the status page.

```APIDOC
## GET /api/status_page/systems

### Description
Retrieves a list of systems.

### Method
GET

### Endpoint
/api/status_page/systems

### Response
#### Success Response (200)
- **systems** (array) - A list of system objects.

#### Response Example
{
  "systems": [
    {
      "id": 1,
      "name": "Main Server",
      "status": "operational"
    }
  ]
}
```
Tokens:
Raw