Documentation

Help

Use formats

We can use formats to have other things than text. It is possible to create your own formats. But there is already a module to manage formats for a website and instant messaging.

  1. Let's install the module at the root of our project with npm install newbot-formats
  2. Add the format to your skill:

In main.js

import formats from 'newbot-formats'
import code from './main.converse'

export default {
    code,
    skills: {
        formats
    }
}

Quick response

Show quick answers like this:

@Event('start')
start() {
    @Format('quickReplies', ['yes', 'no'])
    > Continue ?
    Prompt()
    > Ok !
}

Here's how to display a carousel:

@Event('start')
start() {
    @Format('carousel', [
        {
            title: 'TITLE',
            subtitle: 'SUBTITLE',
            image: 'URL_IMAGE',
            buttons: [
                {
                    url: 'URL',
                    title: 'TITLE BUTTON'
                }
            ]
        }
    ])
    > Continue ?
}

Display an image

@Event('start')
start() {
    @Format('image', 'http://url.com/image.png')
    > Nice picture !
}

Show a video

@Event('start')
start() {
    @Format('video', 'http://url.com/video.mp4')
    > Nice video !
}

Send a contact

@Event('start')
start() {
    @Format('contact', '0123456789', 'Sam R')
    > Here is my friend !
}

Send text with buttons

@Event('start')
start() {
    @Format('buttons', [
        {
            title: 'An url',
            url: 'https://google.fr'
        },
        {
            type: 'postback',
            title: 'Postback'
        }
    ])
    > Buttons
}

Share button

On Facebook Messenger, NewBot ChatBox and Twitter, we can share content with the following code

@Event('start')
start() {
    @Format('buttons', [
        {
           type: 'share'
        }
    ])
    > Buttons
}

On Twitter

On Twitter, let's add the tweet property:

@Event('start')
start() {
    @Format('buttons', [
        {
           type: 'share',
           tweet: {
               text: 'Partagez-moi',
               url: 'https://newbot.io'
               via: '@me',
               hashtags: ['one', 'two']
           }
       }
    ])
    > Share
}
  • tweet.text (required): Text in the tweet
  • tweet.url (optional): Url to share
  • tweet.via (optional): User Profile to Share
  • tweet.hashtags (optional): Embed Hashtags

Configuration file

Note that the modules for the formats are different browser side and server side. For example, on the browser side, we do not need BotFramework. In addition, some modules are not universal and may compromise the smooth operation of the chatbot. NewBot CLI can remedy this:

At the root of our project, let's create an newbot.config.js file. It must contain the following code:

export default {
    map: {
        'newbot-formats': {
            node: 'newbot-formats/node',
            browser: 'newbot-formats/browser'
        }
    }
}

Thus, when the newbot-formats module is imported into the skill, it will actually be replaced by another path:

  • node: for execution on NodeJS
  • browser: for execution on the browser