What's New
Implement a simple chat bubble with a button
Let's say you want to implement a simple chat bubble like this:

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,
});
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;
}
Last updated