Building Message Components
Build message components with ease using the Wapi.js SDK
Wapi.js SDK provides a simaple and easy to use classes architecture to build message components. You can build message component of following types using the Wapi.js SDK:
- Text Message
- Image Message
- Video Message
- Audio Message
- Document Message
- Location Message
- Contact Message
- Reply Message
- Reaction Message
- List Message
- QuickReply ButtonMessage
- Button Message
- Product Message
- Product List Message
Text Message
Text message is the most basic message component that you can send to a user. You can create a text message using the following code:
import { TextMessage } from '@wapijs/wapi.js'
const textMessage = new TextMessage({
text: 'Please say "hello" to proceed.'
})
Image Message
Image message is a message component that you can use to send images to a user. You can create a image message using the following code:
import { ImageMessage } from '@wapijs/wapi.js'
const imageMessage = new ImageMessage({
link: 'https://example.com/image.jpg',
caption: 'This is a caption for the image.'
})
Video Message
Video message is a message component that you can use to send videos to a user. You can create a video message using the following code:
import { VideoMessage } from '@wapijs/wapi.js'
const videoMessage = new VideoMessage({
link: 'https://example.com/video.mp4',
caption: 'This is a caption for the video.'
})
Audio Message
Audio message is a message component that you can use to send audio files to a user. You can create a audio message using the following code:
import { AudioMessage } from '@wapijs/wapi.js'
const audioMessage = new AudioMessage({
link: 'https://example.com/audio.mp3',
})
Document Message
Document message is a message component that you can use to send documents to a user. You can create a document message using the following code:
import { DocumentMessage } from '@wapijs/wapi.js'
const documentMessage = new DocumentMessage({
link: 'https://example.com/image.jpg',
caption: 'This is a caption for the image.'
})
Location Message
Location message is a message component that you can use to send location to a user. You can create a location message using the following code:
import { LocationMessage } from '@wapijs/wapi.js'
const locationMessage = new LocationMessage({
latitude: 37.7749,
longitude: -122.4194,
name: 'San Francisco',
address: 'San Francisco, CA, USA'
})
Contact Message
Contact message is a message component that you can use to send contact details to a user. You can create a contact message using the following code:
import { Contact, ContactMessage } from '@wapijs/wapi.js'
const contact = new Contact({
name: {
last_name: 'Doe',
formatted_name: 'John Doe'
}
})
// optional
contact.addAddress({
city: 'San Francisco',
country: 'USA',
street: '123 Main Street',
type: 'HOME',
country_code: 'US',
state: 'CA'
})
// optional
contact.addEmail({
type: 'HOME',
email: '[email protected]'
})
// optional
contact.addPhone({
type: 'CELL',
phone: '+1234567890'
})
// optional
contact.addUrl({
type: 'HOME',
url: 'https://softlancer.co'
})
const contactMessage = new ContactMessage({
contacts: [contact]
})
// add contact to the existing contact message
contactMessage.addContact(anotherContact)
Reaction Message
Reaction message is a message component that you can use to send a reaction to a message. You can create a reaction message using the following code:
import { ReactionMessage } from '@wapijs/wapi.js'
const reactionMessage = new ReactionMessage({
reaction: '✅',
messageId: 'message-id'
})
List Message
List message is a message component that you can use to send a list of items to a user. You can create a list message using the following code:
import { ListInteractionMessage } from '@wapijs/wapi.js'
const listMessage = new ListInteractionMessage({
bodyText: 'Welcome to Wapi.js',
buttonText: 'Ask questions',
footerText: 'Beta version',
sections: [
{
rows: [
{
description: 'row description',
id: `row-1`,
title: `row title`
}
],
title: 'section title'
}
]
})
Button Interactive Message
Button message is a message component that you can use to send a button to a user. You can create a button message using the following code:
import { ButtonInteractionMessage } from '@wapijs/wapi.js'
const buttonMessage = new ButtonInteractionMessage({
bodyText: 'Welcome to Wapi.js',
buttons: [{
id: 'I am a button',
title: 'Click me'
}],
footerText: 'Beta version'
})
Product Message
Product message is a message component that you can use to send a product to a user. You can create a product message using the following code:
import { ProductMessage } from '@wapijs/wapi.js'
const productMessage = new ProductMessage({
bodyText: 'Hii, I am a product.',
buttonText: 'Buy',
catalogId: '123',
productRetailerId: '123',
footerText: 'Beta version',
})
Product List Message
Product List message is a message component that you can use to send a list of products to a user. You can create a product list message using the following code:
import { ProductListMessage, ProductListSection, Product, HeaderTypeEnum } from '@wapijs/wapi.js'
const productListMessage = new ProductListMessage({
bodyText: 'Welcome to Wapi.js',
buttonText: 'Buy',
footerText: 'Beta version',
catalogId: '123',
productRetailerId: '123',
header: {
text: 'Products',
type: HeaderTypeEnum.Text
},
sections: [
new ProductListSection([new Product('123')], 'Section 1'),
]
})
const section = new ProductListSection([], 'Section 2')
section.addProduct(new Product('123'))
productListMessage.addSection(section)
Temaplate Message
Template message is a message component that you can use to send a template to a user. You can create a template message using the following code:
Was this page helpful?