Template Messages
Sunshine Conversations lets you define rich messages templates and easily send them to users. This functionality can be leveraged to create a set of “canned messages” or “agent saved replies”. It’s especially useful for message that are hard to craft on the fly as they require external resources.
Creating a Template
To create a template, you must use the Template API.
For example:
smooch.templates.create({
appId: '<your_app_id>',
props: {
name: 'example_template',
message: {
type: 'text',
role: 'appMaker',
text: 'This is an example'
}
}
});
Once created, you can send it to a user.
See the template examples section for more detailed templates.
Sample Templates
A set of sample templates are already available to your Sunshine Conversations App. You can quickly try sending rich messages using those. Simply send a message including the following syntax to try each template.
- Compound Message:
%((template: smooch_tmpl_family_basket))% - Carousel Message:
%((template: smooch_tmpl_things_to_do))% - File Message:
%((template: smooch_tmpl_warranty))% - Form Message:
%((template: smooch_tmpl_lead_capture))% - Quick Reply:
%((template: smooch_tmpl_rate_conversation))% - Location Request:
%((template: smooch_tmpl_request_location))% - NPS Survey:
%((template: smooch_tmpl_nps_survey))%
Sending a Template Message
Once a template has been created with a specific name as seen here, it can be sent to the user via shorthand.
To send the example template:
%((template: example_template))%
An alternate syntax is also available in case a conflict occurs between the previous syntax and an external templating language: %{{template: example_template}}%.
Note that including a template in a message via the shorthand syntax can generate multiple messages if surrounding text is included. The post message endpoint will return additional messages in the extraMessages property of the response, if any.
Template Examples
Below is a list of template examples along with a preview of the resulting message that you can use to get you started.
Compound Message
You can send compound messages may include text, actions and an image.
smooch.templates.create({
appId: '5963c0d619a30a2e00de36b8',
props: {
name: 'family_basket',
message: {
type: 'image',
role: 'appMaker',
text: 'I strongly recommend our Family Basket. It’s made just for people like you.',
actions: [
{
type: 'postback',
text: 'Subscribe',
payload: 'NOOP'
},
{
type: 'postback',
text: 'Learn more',
payload: 'NOOP'
}
],
mediaUrl: 'https://media.smooch.io/templates/template-family-basket.jpg'
}
}
});
Once created, this template can be sent via the following shorthand: %((template: family_basket))%.
Carousel Message
You can send carousel messages.
smooch.templates.create({
appId: '5963c0d619a30a2e00de36b8',
props: {
name: 'things_to_do',
message: {
type: 'carousel',
role: 'appMaker',
items: [
{
title: 'Scandinave Getaway',
description:
'Enjoy massage treatments situated in a serene natural forest with an on-site bistro serving healthy local fare.',
mediaUrl: 'https://media.smooch.io/templates/template-scandinave.jpg',
actions: [
{
type: 'postback',
text: 'Learn more',
payload: 'NOOP'
},
{
type: 'postback',
text: 'Check availability',
payload: 'NOOP'
}
]
},
{
title: 'Brewery Tour',
description:
"Explore Boston's thriving brewpub scene and taste roughly 18 types of beer on these guided morning and evening brewery tours.",
mediaUrl: 'https://media.smooch.io/templates/template-brewery-tour.jpg',
actions: [
{
type: 'postback',
text: 'Learn more',
payload: 'NOOP'
},
{
type: 'postback',
text: 'Check availability',
payload: 'NOOP'
}
]
},
{
title: 'Whale Watching',
description:
'Experience the marine wildlife on this guided, 3-hour whale-watching cruise around the National Marine Sanctuary.',
mediaUrl: 'https://media.smooch.io/templates/template-whale-watching.jpg',
actions: [
{
type: 'postback',
text: 'Learn more',
payload: 'NOOP'
},
{
type: 'postback',
text: 'Check availability',
payload: 'NOOP'
}
]
},
{
title: 'French Dining',
description:
'Gary Danko provides an award-winning combination of classic French cooking and personable yet impeccable service.',
mediaUrl: 'https://media.smooch.io/templates/template-french-dining.jpg',
actions: [
{
type: 'postback',
text: 'Learn more',
payload: 'NOOP'
},
{
type: 'postback',
text: 'Check availability',
payload: 'NOOP'
}
]
},
{
title: 'Seafood Cuisine',
description:
'Ostra focuses on specialty seafood and the cuisine highlights the natural and fresh flavors of each dish.',
mediaUrl: 'https://media.smooch.io/templates/template-seafood-cuisine.jpg',
actions: [
{
type: 'postback',
text: 'Learn more',
payload: 'NOOP'
},
{
type: 'postback',
text: 'Check availability',
payload: 'NOOP'
}
]
}
]
}
}
});
Once created, it can be sent via the following shorthand: Here’s a selection of nearby restaurants for you to try while in Boston. %((template: things_to_do))%.
File Message
You can send a specific file on the fly.
smooch.templates.create({
appId: '5963c0d619a30a2e00de36b8',
props: {
name: 'warranty',
message: {
type: 'file',
role: 'appMaker',
mediaUrl: 'https://media.smooch.io/templates/template-warranty.pdf'
}
}
});
Once created, it can be sent via the following shorthand: Here’s the warranty for your item. %((template: warranty))%.
Form Message
You can send a specific form on the fly.
smooch.templates.create({
appId: '5963c0d619a30a2e00de36b8',
props: {
name: 'lead_capture',
message: {
type: 'form',
role: 'appMaker',
fields: [
{
type: 'email',
name: 'email',
label: 'Email',
placeholder: ''
},
{
type: 'text',
name: 'company-website',
label: 'Company website',
placeholder: ''
},
{
type: 'select',
name: 'company-size',
label: 'Company size',
placeholder: 'Choose a number...',
options: [
{
name: '1-10',
label: '1-10 employees'
},
{
name: '11-50',
label: '11-50 employees'
},
{
name: '51-250',
label: '51-250 employees'
},
{
name: '251-1000',
label: '251-1000 employees'
},
{
name: '1001+',
label: '1001+ employees'
}
]
}
]
}
}
});
Once created, it can be sent via the following shorthand: %((template: lead_capture))%.
Quick Reply
You can send a quick reply prompt.
smooch.templates.create({
appId: '5963c0d619a30a2e00de36b8',
props: {
name: 'rate_conversation',
message: {
type: 'text',
role: 'appMaker',
text: "Help us understand how we're doing. Please rate your conversation",
actions: [
{
text: '😠',
payload: '😠',
type: 'reply'
},
{
text: '☹️',
payload: '☹️',
type: 'reply'
},
{
text: '🙂',
payload: '🙂',
type: 'reply'
},
{
text: '😍',
payload: '😍',
type: 'reply'
}
]
}
}
});
Once created, it can be sent via the following shorthand: %((template: rate_conversation))%.
Location Request
You can send a request for the user’s location.
smooch.templates.create({
appId: '5963c0d619a30a2e00de36b8',
props: {
name: 'request_location',
message: {
type: 'text',
role: 'appMaker',
text: 'Let us know where you are.',
actions: [
{
type: 'locationRequest',
text: 'Send location'
}
]
}
}
});
NPS Survey
You can send a net promoter score survey.
smooch.templates.create({
appId: '5963c0d619a30a2e00de36b8',
props: {
name: 'nps_survey',
message: {
type: 'text',
role: 'appMaker',
text: 'How likely are you to recommend us to a friend or colleague?',
actions: [
{
text: '0',
payload: '0',
type: 'reply'
},
{
text: '1',
payload: '1',
type: 'reply'
},
{
text: '2',
payload: '2',
type: 'reply'
},
...{
text: '10',
payload: '10',
type: 'reply'
}
]
}
}
});
Once created, it can be sent via the following shorthand: %((template: nps_survey))%.