Insert a personalized message in your chatbox

You can easily insert a message in a conversation programmatically, wether you are already talking to your contact or not.

Basic message

var MS = _xeno.MessageSample;
var Message = _xeno.Message;

var message = new Message(MS.bot, "Suddenly, pineapples.");
_xeno.sendMessage(message);

The first argument to the Message constructor is a properties preset. It represents the identity of the message sender, among support, agent, visitor, and bot.

Message parsing

Depending on which preset you pick, the parsing will be either HTML or MARKDOWN. But you can still specify which parsing you want explicitly:

var MS = _xeno.MessageSample;
var Message = _xeno.Message;

var message = new Message(MS.bot, "Suddenly, *pineapples*.");
message.parser = Message.PARSER.MARKDOWN;
_xeno.sendMessage(message);

Interactive message

You can create interactive messages as you please. Here is an example of what you can do with interactive messages:

var MS = _xeno.MessageSample;
var Message = _xeno.Message;

var message = new Message(MS.bot);
message.mandatory_buttons = true;
message.plain_text = "I like trains.";
message.text = `
  I like trains.
  <div id="button-no" class="button">
    No no no no no wait!
  </div>
  <div id="button-yes" class="button">
    Yes you do
  </div>
`;

message.addInteraction({
  selector: '.button',
  event: 'click',
  removeButtons: true,
  printResponse: function(e) { return e.currentTarget.innerHTML },
  handler: function(e) {
    alert("You clicked on the button! " + e.currentTarget.innerHTML);
  }
});

_xeno.sendMessage(message);

mandatory_buttons tells the chatbox that the chat input must be hidden until the contact triggers the attached interaction.

plain_text is the text without formatting that will be displayed in the bubble when the chatbox is closed, or in the conversations list.

text is the equivalent of the constructor second parameter.

Interaction.selector is a css selector which the listener will be attached to.

Interaction.event is an event type given to the event listener.

Interaction.removeButtons will remove every buttons after the event is triggered. It will also restore the chat input.

Interaction.printResponse is a function that returns a text that will appear as sent by the contact after the listener is triggered.

Interaction.handler is a function that does whatever you want when the event listener is triggered. You can tell the interaction was not valid (ie: form validation) by returning false. In that case, buttons won't be removed and the chat input will remain disabled.