Advanced integrations:

On each page you can call document.TickChatWidget to access the chat widget and trigger events.

The properties of this event are described in 'AddBasicTicketEventRequest' which you can find in the swagger documentation or just take a look at the example below.

Call addEvent to trigger a chat widget event document.TickChatWidget.addEvent(eventData);

document.TickChatWidget.addEvent({
  type: 'toggle'
});

Send message (and start Ticket if not already created)

document.TickChatWidget.addEvent({
  type: 'message',
  data: {
          message: "Tick helps you do better customer service",
        }
});

Add hook to include metadata with each message

create a hook that is called before each message is sent to Tick. It uses the same smart viewer as used for Metadata components but instead of being presented on the side the data is shown under each message. This way you can give contextual information about for example the current URL of the chatter.

The function is expected to return an object or text.

Example with object

document.TickChatWidget.setMessageMetaDataHook(function () {
  return {
    shoppingcartid: '0123456'
    myCurrentUrl: window.location.href,
    name: 'Einstein',
    cart: [
      {
        name: 'Shampoo',
        info: 'Shampoo is a wildly overestimated product',
      },
      {
        name: 'Chocolate',
        info: 'By eating this you get supernatural powers',
      }
    ]
  }
});

Example with text

document.TickChatWidget.setMessageMetaDataHook(function () {
  return "Hello world",
});

Example with state variable

In this example the state variable 'ticket.shoppingcartid' was already defined as Ticket variable in States & Variables. In the following example the shoppingcartid will be recognized as state variable and therefor stored.

document.TickChatWidget.setMessageMetaDataHook(function () {
  return {
    shoppingcartid: '0123456'
    myCurrentUrl: window.location.href,
  }
});

Add Basic event

Prerequisite: A conversation is started, when not the event will be ignored

document.TickChatWidget.addEvent({
  type: 'basicevent',
  data: {
          dateUtc: new Date(),
          text: "This is the text which will be shown ",
          imageUrl: "https://your-image-url-here.com/image.png",
          color: 1, // ColorsEnum in the swagger documentation. 0 is no color, 30 is highest color
          buttons: [{
            url: window.location.href,
            text: "Current URL"
          },
          {
            url: "https://www.tick.cloud",
            text: "Tick.cloud"
          }
          ]
        }
});