Bot Extension Module
The purpose of this module is to dynamically create rich UI elements for your bot inside smartloop platform.
Getting Started.
Copy and paste the following code inside script block to render a text element:
import Ext from "recime-bot-extension";
const __ = Ext.default;
exports.handler = (context, done) => {
// context.args
done(__.text("Hello world"));
};Button Template.
Button template is supported in Facebook Messenger and Viber. It is possible to create a button template in the following way:
import Ext from "recime-bot-extension";
const __ = Ext.default;
exports.handler = (context, done) => {
// context.args
done(__.buttonTemplate("Your Summary", [
__.postbackButton('Button1', 'about'),
__.urlButton('Button2', "https://recime.io")
]));
};Viber on the other hand supports row and column and additional properties to customize the look and feel of a button template:
//script block
import Ext from 'recime-bot-extension';
const __ = Ext.default;
exports.handler = (context, done) => {
done(__.buttonTemplate('Text', [
__.postbackButton('button1', 'about', {
bgColor : '#e30c2e',
fgColor : '#fff',
row : 0,
column : 0
}),
__.postbackButton('Button2', 'start', {
bgColor : '#76c0d6',
fgColor : '#fff',
row : 0,
column : 1
})
]));
};
The following properties are supported for a Viber button:
| Property | Description |
|---|---|
| bgColor | Background color |
| fgColor | Foreground color |
| row | Number of columns per carousel content block. (0 - 5) |
| column | Number of rows per carousel content block. (0 - 6) |
| imageUrl | Link (https://) |
| textSize | Font size. (regular, large, small) |
| align | Text Alignment (left, center, right) |
Generic Template
Use this extension to dynamically construct "Generic Template" or "Carousel". An example of a generic template that is constructed dynamically from an API result is shown below:
import Ext from "recime-bot-extension";
const __ = Ext.default;
exports.handler = (context, done) => {
const result = {
forecast : [
{
id : 1,
day : new Date().toISOString(),
temp: '60F',
icon: 'https://dashboard.smartloop.ai/assets/logo1.png'
},
{
id : 2,
day : new Date().toISOString(),
temp: '40F',
icon: 'https://dashboard.smartloop.ai/assets/logo1.png'
}
]
}
const t = __.genericTemplate(result.forecast.map(r => {
return __.genericItem(r.day, r.temp, r.icon,
null,[
__.postbackButton('Detail', `id-${r.id}`)
]);
}));
done(t);
};Methods
- text (text: String, replies: Button[])
- image (imageUrl: String, replies: Button[])
- buttonTemplate(title: String, buttons:Button[])
- postbackButton(title: String, blockName: String) => Button
- replyButton(title: String, reply: String) => Button /* Use
replyButtonto capture user Input */ - urlButton(title: String, url: String) => Button
- genericTemplate(items)
- genericItem(title: String, subtitle: String, imageUrl: String, defaultActionUrl: String, buttons)
License
Copyright © 2018 Recime Inc. All rights reserved.
