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:
In all the media messages which includes image, document, audio, video and sticker, either we will have to use the Id of media, or a publicly accessible hosted media Url.
With the rapidly changing whatsapp business platform features and offerings, we try our best to be in sync with the new features provided by the API. If you think we are missing upon any of the available type of message support. You can open a github issue
here or direclty
contact the maintainer of the project.
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 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:
In order to build a contact message, you need to use multiple classes provided to build, multiple components ofq the contact message. Now this has been done for ease of use and to provide a more structured way to build the contact message.
import { Contact, ContactMessage } from '@wapijs/wapi.js'
const contact = new Contact({
name: {
last_name: 'Doe',
formatted_name: 'John Doe'
}
})
contact.addAddress({
city: 'San Francisco',
country: 'USA',
street: '123 Main Street',
type: 'HOME',
country_code: 'US',
state: 'CA'
})
contact.addEmail({
type: 'HOME',
email: '[email protected]'
})
contact.addPhone({
type: 'CELL',
phone: '+1234567890'
})
contact.addUrl({
type: 'HOME',
url: 'https://softlancer.co'
})
const contactMessage = new ContactMessage({
contacts: [contact]
})
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 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:
You need to get your template approved before sending a template message to users. You can check the template message approval documentation
here.
