Skip to content

CMS Basics

Conversational element basic structure

{
    "elementCode": "fix-welcome-1",
    "elementType": "text",
    "txt": {
        "en": "Welcome to our hotel. 😃",
        "de": "Hallo! schön, dass Du hier bist. 😃"
    }
}

elementCode must be a unique name to identify this text message.
For multi-language its recommended to use ISO 639-1 language code,

Good Practice:
Use hierachical elementCode to structure a conversation:
info-pool
info-pool-rooftop
info-pool-basement
info-pool-basement-openingHours

elementType defines the template to be used. For text messages it's text

txt contains the text messages in all languages that your conversational solution should support.

Text personalization

{
    "elementCode": "fix-welcome-1",
    "elementType": "text",
    "txt": {
        "en": "Welcome to our hotel. 😃",
        "de": "Hallo, schön, dass Du hier bist. 😃"
    },
    "personalized": {
        "en": "Good to have you back, {{guestName}}!",
        "de": "Willkommen zurück, {{guestName}}"
    }
}

personalized defines text messages that will be displayed to the user in case all context variables needed are present in the user context. For information about user context see chapter user context.

Remark to above JSON example:
If guestName exists in the users context and has a value, the framework will display the text from JSON attribute personalized

Images

{
    ...
    "image": "http://url-to-image.jpg"
}

An image can be added to an element by its URL. Per default the image will be shown in the chat flow in the text message.

Quick-reply buttons

{
    ...

    "buttons": [
        {
            "type": "quickreply",
            "de": {
                "title": "Sport"
            },
            "en": {
                "title": "working out"
            },
            "successor": "info-sport-indoor"
        },
        {
            "type": "url",
            "de": {
                "title": "Öffne Google",
            "url": "https://www.google.de"
            },
            "en": {
                "title": "open Google",
                "url": "https://google.com"
            }
        }
    ]

...
}

Add buttons for the user to click or tap below the text message.

Buttons can have two functionalities:

  • quickreply If the user clicks/taps on this button the conversation continues with the next conversational element (text, carousel, business logic, ...). The elementCode of the next element needs to be defined in attribute successor.
  • url If the user clicks on this button, the configured webpage is being opend. In DialogShift website chat or smartphone chat the new page opens in a new tab.

Hint:
Use buttons to build decision trees. Set context variables in button defintions to store decisions made by the user in the user context.

{
    ...

    "buttons": [
        {
            "type": "quickreply",
            "en": {
                "title": "I like color green "
            },
            "setContext": {
                "favoriteColor": "green"
            },
            "successor": "color-choose-tankyou"
        }
    ]

...
}

Successor

In case you want to show a row of conversational elements (e.g. text bubbles) directly following each other before you enable the user to interact with the chat again use attribute successor.

{
    "elementCode": "fix-welcome-1",
    "elementType": "text",
    "txt": {
        "en": "Welcome to our hotel. 😃",
        "de": "Hallo, schön, dass Du hier bist. 😃"
    },
    "successor": "welcome-2"
}

{
    "elementCode": "welcome-2",
    "elementType": "text",
    "txt": {
        "en": "Use this chat to ...",
        "de": "In diesem Chat kannst Du ..."
    }
}

Effects

Add the following attribute to the text chat message if you want to draw more attention to the newly displayed message:

{
    ...
    "pulsateDuration": 10,
    ...
}

pulsateDurationwill add a pulsing effect to the chat bubble once the bubble enters the chat. Will only be shown in DialogShift's website chat & chat app. The value is an integer defining the number of seconds the effect will last.

Display Limitations

For some use cases it makes sense to only show the chat message once per user.

For example: a certain conversation is triggered by a user placing the cursor into an input field of a web-form on the host website. A user can do this repeatedly, but you might want to limit the number of messages the user gets displayed in this case.

{
    ...
    "maxDisplays": 2,
    ...
}


NLP fail counter

The second configuration to transfer a conversation to a live agent, is to set the nlpErrorThreshold to a value.

E.g. send conversation to live chat agent after three vain attempts of the NLP to understand the user's input. In client configuration settings define "nlpErrorThreshold": 3,"