What's New

Implement a simple chat bubble with a button

Let's say you want to implement a simple chat bubble like this:

1. When sending a message, fill in the message data field with the information needed to draw the chat bubble.

const chatViewData = {
    'type': 'msg_with_button',
    'title': 'Hi!',
    'body': 'This is a simple chat bubble with a button.',
    'button_text': 'Say Hello',
    'button_action': 'SayHello'
};

await client.sendMessage({
    channelId: 'myChannel',
    type: 'text',
    data: chatViewData,
});

You can enter up to 10 key-value pairs in data field. The maximum size of key is 128 characters and the maximum size of value is 1024 characters. Both key and value must be strings.

2. When you display a message, use the information in the data field to draw a chat bubble.

// Vue.js example
<div v-if="message.data.type == 'msg_with_button'" class="chat-bubble">
    <div class="chat-title">{{ message.data.title }}</div>
    <div class="chat-body">{{ message.data.body }}</div>
    <button class="chat-button" @click="handleButtonClicked(message.data.button_action)>{{ message.data.button_text }}</button>
</div>

/*
CSS
*/
.chat-bubble {
     max-width: 200px;
     padding: 15px;
     background: #f1f1f1;
     border-radius: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     margin: 10px;
     position: relative;
}
 .chat-bubble::after {
     content: "";
     position: absolute;
     top: 10px;
     left: -10px;
     border-width: 10px;
     border-style: solid;
     border-color: transparent #f1f1f1 transparent transparent;
}
 .chat-title {
     font-weight: bold;
     margin-bottom: 10px;
}
 .chat-body {
     margin-bottom: 10px;
}
 .chat-button {
     display: inline-block;
     padding: 10px 20px;
     background: #007bff;
     color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     text-align: center;
     text-decoration: none;
}
 .chat-button:hover {
     background: #0056b3;
}