Example: creating a Contact Us chatbot

Step 1: Create a question with two buttons

Create a question interaction that will ask the user what they want to do, and provides one of two button responses.

Result of Step 1

To create a question interaction:

  1. At the project level, click Create New, select Chat Bot followed by Create New Bot. Select the Project and then enter the Communication Name. Click Create.
  2. Drag a question interaction into the canvas.
  3. In the Name of Interaction field, enter the question's name. This is the label that displays in the canvas. For example, enter Greeting.
  4. In the When the User Says field, enter the user responses that will cause this interaction to be shown to the user. Separate responses with commas. The letter case is ignored so hi, Hi and HI are all the same. For example enter hello, hi, start.
    Note: When you create your own bots, you can also define the user responses using intentions rather than using the When the User Says field.
  5. In the Respond to User field, enter what the user will see when the bot receives one of the responses you entered in the When the User Says field. For example, enter Greetings. Would you like to contact us?
  6. Click the Answers tab.
  7. In the Set Answer Type field, select Set up Button/Quick Reply Answer.We are using custom answers in this example to set up the alternative responses for this part of the conversation. Each answer is set up as a button.
  8. Click + Answer to add the first button.
    1. In the Display field, enter Yes as the button name. Users tap or click to select the button, or they can type in the button name (Yes).
    2. In the Expect to receive field, enter y. This gives users the option to select the button by typing y. Click OK.
  9. Click + Answer and create the No, thank you button. Let users also select the button by typing n or no. Click OK.

Step 2: Create a message (Contact us)

When the user selects Yes in the Greeting question, they will see a message similar to this:

To create the Contact Us message:

  1. Drag a message interaction into the canvas.
  2. In the Name of Interaction field, enter the message name. This is the label that displays on the canvas. For example, enter Contact us.
  3. Skip the When the User Says field. This interaction will be triggered by the preceding Greeting question so you do not need to enter anything here.
  4. In the Respond to User field, enter what the user will see when this interaction is triggered. For example enter You can contact us here.
  5. Click the Buttons tab and add the first button.
    1. Click + Button to create a button.
    2. In the Display field, enter the button name. For example enter Website.
    3. Select URL as the button type. This URL will direct the user to a customer support site.
    4. In the URL field, enter the website address and then click OK. You can enter any valid URL in this field. For example. enter http://www.google.com.
  6. Click + Button to add another button.
    1. In the Button Type field, select Phone.
    2. In the Display field enter the actual phone number as the button name. For example, enter some zeros.
    3. In the Phone field, enter the phone number and then click OK.
  7. Click OK to close the dialog and go back to the canvas.

Step 3: Create a message (No thanks)

When the user clicks the No, thank you button in the Greeting question, they will see a message similar to this:

To create the No thanks message:
  1. Drag another message interaction into the Canvas.
  2. In the Name of Interaction field, enter the message name. For example enter Not right now.
  3. Skip the When the User Says field. This interaction will be triggered by the preceding interaction (the Greeting question) so you do not need to enter anything here.
  4. In the Respond to User field, enter what the user will see when this interaction is triggered. Click OK. For example enter OK, let us know if you need help.The bot should look similar to this:

Step 4: Link buttons to messages

In this step you link each button in the Greeting question to the interaction that the bot goes to next. The links provide branching logic to this conversation, allowing users to be directed to the appropriate response.

  1. Select the Yes question.
  2. In the Next field, select the interaction that will be triggered when the user sends an expected response. In this case, select the Contact Us message.
  3. Click OK. An arrow now links the button to the message interaction, and shows the direction the conversation will take when the Yes button is clicked.
  4. Edit the No, thank you button.
  5. In the Next field, select the Not right now interaction. Click OK. When you are finished, the conversation should look similar to this example.

Step 5: Preview the Contact Us bot

You can now test the conversation in Preview using the defined user responses:

  1. Click the Preview button to expand the preview pane.
  2. In the Type a message... box, enter hello or any one of the user responses you entered in the When the User Says field. It does not matter what letter case you use. This message and the buttons are defined in the question interaction.

  3. Click Yes. You could also type yes or y. This triggers the interaction that is linked to the button.

  4. Click Website. A new browser window opens with the address you used.

    If the user was chatting on a smart phone and the phone number was clicked, the user would be taken to a call screen.

  5. To preview the other branch in this conversation, enter hello again and then click the No, thank you button. You could also type one of the alternative user responses n or no. This triggers the interaction that is linked to the button.

  6. To end the conversation, enter cancel or the word or phrase that is configured as the Global cancel for this bot.

  7. Try restarting the conversation and entering a response that you did not define in the When the User Says field.

    The bot won't understand this and sends you the default answer. The default answer is defined as part of the configuration settings for the bot. To change this, click Bot Settings followed by the Default tab. Enter a different answer in the Default Question/Answer Reply field.

Step 6: Test the bot in the Communicate Chat Web Client

You can also test the bot using the Communicate Chat Web Client.

To test the bot in the Web Client:

  1. Click Get My Bot.
  2. The code is displayed under the Embed Code tab.
  3. Click Copy code.
  4. Paste the code into a text editor, and save the file as HTML.
  5. Drag and drop the HTML file into a browser. You are now ready to start a conversation.
    Note: The bot runs immediately because start is sent automatically to Communicate when the bot loads. The default Web Client uses start as the postback to Communicate. If you didn't use start as one of your When the User Says words, you will see the message I'm sorry - I did not understand. In your Web Client options, you can change the start or startPhase option, or you can add start to the bot.