Advanced integrations:

You can access the ChatWidget via the browser global On each page you can call

const chatWidget = document.Tick.ChatWidget;

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.Tick.ChatWidget.addEvent(eventData);

const chatWidget = document.Tick.ChatWidget; 
chatWidget.addEvent({
  type: 'toggle'
});

Send message (and start Ticket if not already created)

const chatWidget = document.Tick.ChatWidget; 
chatWidget.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

const chatWidget = document.Tick.ChatWidget; 
chatWidget.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

const chatWidget = document.Tick.ChatWidget; 
chatWidget.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.

const chatWidget = document.Tick.ChatWidget; 
chatWidget.setMessageMetaDataHook(function () {
  return {
    shoppingcartid: '0123456' // => Stored in ticket.shoppingcartid and usable in flow-automations
    myCurrentUrl: window.location.href,
  }
});

Add Basic event

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

const chatWidget = document.Tick.ChatWidget; 
chatWidget.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"
          }
          ]
        }
});