Skip to content

Support: Quick Start Guide Part 1 - Hello World

The following steps help you to create a simple guided chatbot that greets you with "Hello world!" and allows you to choose and store your favourite color.

Sign up for account

After sign-up and email confirmation your first DialogShift framework instance is automatically created for you.

  • Click on your framework instance.

CMS - Edit conversational content for your bot

In the Content Management System (CMS) section you can read, edit and add conversational elements. We call each message that is being pushed to a user (a bubble, image, a carousel, etc.) in any channel a conversational element

Important info:
Each element has a unique identifier that needs to be provided: elementCode

The framework needs several mandatory basic elements to work properly. The elementCodes of these elements start with fix-... . You can see them in the CMS section, they have been automatically created.

Its strongly recommended not to delete them. You can fully customise them, though. More on that later.

The first message a user gets displayed when opening the channel is called fix-welcome-1

  • Search in the left list for this element and click on it

Important:
We use JSON messages to describe the conversational element.
If you are not familiar with JSON have a quick read here: JSON tutorial @ DigitalOcean

You see a standard greeting message in two languages: English and German. This is just a placeholder. The framework can support as many languages as you like. We will disregard the German texts in this guide. Switching the language will be covered in another guide.

Lets change the English greeting to "Hello world!". We leave the German text as it is.

The elementType is a mandatory attribute. Its value text indicates that we have configured a simple text message.

Your element should look like this now.

{
    "elementCode": "fix-welcome-1",
    "elementType": "text",
    "txt": {
        "en": "Hello world!",
        "de": "Hallo! Schön, dass du hier im Chat bist. 😃"
    }
}

Now we want his text message to be followed by another text message. - Add the successor attribute to the element:

{
    "elementCode": "fix-welcome-1",
    "elementType": "text",
    "txt": {
        "en": "Hi! Welcome to our chat. 😃",
        "de": "Hallo! Schön, dass du hier im Chat bist. 😃"
    },
    "successor": "welcome-2"
}
  • Click "save"

This element welcome-2 does not exist yet. So let's create it:

  • Click "add element"

Modify the JSON like this. You can copy and paste.

{
    "elementCode": "welcome-2",
    "elementType": "text",
    "txt": {
        "en": "What's your favourite color?",
        "de": "Ipsum lorem"
    },

    "buttons": [
        {
            "type": "quickreply",
            "en": {"title": "red"},
            "de": {"title": "Ipsum lorem"},
            "successor": "welcome-favcolor",
                    "setContext": {
                "favColor": "red"
                    }
        },

        {
            "type": "quickreply",
            "en": {"title": "green"},
            "de": {"title": "Ipsum lorem"},
            "successor": "welcome-fav-color",
                    "setContext": {
                "favColor": "green"
                    }
        }

    ]
}

We have created another text message that automatically follows the first message.

The first button will have the title "red", the second button "green". Each button sets a custom variable in the users context.

Important Info:
User context is a datastore that belongs to the individual user. Conversational elements can create, read or update variables in the user context.

The variable favColor is being set according to the users choices.

The two buttons both point with their attribute successor to the same conversational element with elementCode welcome-fav-color .

Lets create this element:

{
    "elementCode": "welcome-fav-color",
    "elementType": "text",
    "txt": {},
    "personalized": {
        "en": "Your favorite Color is {{favColor}}",
        "de": "Ipsum lorem"
    }
}

This time we want to take advantage of the templating system and display the user a message with a value from the user context variable favcolor . Use the attribute personalized to specify text in several languages using the templating tags. The attribute txt as used in the conversational elements before, can optionally also be added to provide a fallback text, in case the user context does not provide the necessary variable.

Try out your bot

Head over to http://webchat.dialogshift.com/?clid=<your-clientid> to start this bot in a desktop window (or testing this is ok).

The bot will recognise returning user based on a set cookie. If you want to create new users with the same browser add URL parameter ctrl=forcenew to the URL

Integrate chatbot on website

The above url openes the smartphone app. For testing this is ok. For your users you might want to provide the above url in a mobile context e.g. via QR code onboarding. For use on a webpage you should use DialogShifts SDK.

Head over to the integration page for a simpel example:

Add the JavaScript snipped as described to your base html page.