UXPin logo

Chatbot

In this tutorial, you will learn how to create a chatbot.

→ Download a ready .uxp file for this tutorial.

Setting up the Design

First, we'll create an icon for users to open the chat.

  1. Select Icon from the Quick Tools panel or press Alt "I" on your keyboard. Click anywhere on the canvas to place the icon.
  2. Select your icon by clicking on it and type 'chat' in the Search icons field in the Properties Panel.
  3. Position the chat icon on the bottom right of the canvas as it would appear on a web page.

Next, we'll create the chat window background.

  1. Select the Box from Quick Tools or press "B" on your keyboard and click anywhere on the canvas to place it.
  2. Position the Box alongside the chat icon.

Now, we need a header for the chat window.

  1. Select the Box from Quick Tools or press "B" on your keyboard and click at the top of the first Box to place it.
  2. Double-click inside the Box to initiate the text cursor, and type: 'Customer support' as the header text.
  3. Select Icon from the Quick Tools panel or press Alt "I" on your keyboard. Click inside the header opposite the Chat element to place it.
  4. Select your icon by clicking on it and type 'mark close' in the Search icons field in the Properties Panel.
  5. Select the icon element under Pages & Layers and rename it 'Quit'.
  6. Hold Ctrl to click Box and Quit in Pages & Layers, then press Ctrl "G" to group them.
  7. Rename the group 'Top bar'.

Next, we need a welcome component for our chatbot.

  1. Select the Box from Quick Tools or press "B" on your keyboard and click below the Top bar element to place it.
  2. Rename the Box 'WelcomeMsg' in Pages & Layers.
  3. Double-click inside the Box to initiate the text cursor, and type: 'Hi! Chatbot here. Please select what you want to ask about:' as the header text.
  4. Select the Box from Quick Tools or press "B" on your keyboard and click below the WelcomeMsg element to place it.
  5. Double-click inside the Box to initiate the text cursor, and type: 'Offer'.
  6. Rename the Box 'Subject1' in Pages & Layers.
  7. Press Ctrl "D" to duplicate Subject1 and rename the new element 'Subject2'.
  8. Double-click inside Subject2 to initiate the text cursor, and type: 'Requirements'.
  9. Position Subject1 and Subject2 below the WelcomeMsg.
  10. Hold Ctrl and click Subject1, Subject2, and WelcomeMsg in Pages & Layers, then press Ctrl "G" to group them.
  11. Rename the group 'WelcomeQuestion'.

We need several components to house the chatbot and user responses. 

  1. Select the Box from Quick Tools or press "B" on your keyboard and click below the WelcomeQuestion element to place it.
  2. Rename the Box 'Reply1' in Pages & Layers.
  3. Double-click inside the Box to initiate the text cursor, and type some placeholder text. We'll change this text using Interactions later, so it doesn't matter what you write here initially.
  4. Press Ctrl "D" to duplicate Reply1 and rename the new element 'Question_2'.
  5. Select the Box from Quick Tools or press "B" on your keyboard and click below the Question_2 element to place it.
  6. Rename the Box 'ButtonYes' in Pages & Layers.
  7. Double-click inside ButtonYes to initiate the text cursor, and type: 'Yes'.
  8. Press Ctrl "D" to duplicate ButtonYes and rename the new element 'ButtonNo'.
  1. Double-click inside ButtonNo to initiate the text cursor, and type: 'No, thanks'.
  2. Hold Ctrl and click Question_2, ButtonYes, and ButtonNo in Pages & Layers, then press Ctrl "G" to group them.
  3. Rename the group '2ndQuestion'.
  4. Select the Box from Quick Tools or press "B" on your keyboard and click below the 2ndQuestion element to place it.
  5. Rename the Box 'Thank You message' in Pages & Layers.
  6. Double-click inside Thank You message to initiate the text cursor, and type: 'Thank you for contacting us!'
  7. Press Ctrl "D" to duplicate Thank You message and rename the new element 'Reply2'.
  8. Double-click inside Reply2 to initiate the text cursor, and type: Thanks! Someone will answer your question as soon as possible.

Creating a component for the user's reply:

  1. Select the Box from Quick Tools or press "B" on your keyboard and click below the 2ndQuestion element to place it on top of the Thank You message component. Move Reply2 below the new Box so it's still visible.
  2. Rename the Box 'User Reply' in Pages & Layers.
  3. Double-click inside the User Reply to initiate the text cursor and type some placeholder text. We'll change this text using Interactions later, so it doesn't matter what you write here initially.

Adding a form text field for the user to chat.

  1. Select Input under Forms... from the Quick Tools and click below the Thank You message to place it.
  2. With the Input still selected, make the following adjustments in the Properties Panel:
    Padding (click the icon next to open the individual corners): 0 8 0 24
    Border: #8C8C8C — 1 0 0 0 
    INPUT:
    Type: Text
    Placeholder: Type here…
  3. Drag the Input to position it flush with the bottom of the chat window.
  4. Select Icon from Quick Tools and click inside the Input to place it.
  5. Use Search icons in the Properties Panel to find the 'send' icon.
  6. Hold Ctrl and click Input, and Icon elements you've just created in Pages & Layers, then press Ctrl "G" to group them.
  7. Rename the group 'User Input'.
  8. Select all the elements in Pages & Layers (excluding Open chat) and press Ctrl "G" to group them.
  9. Rename the group 'Chat window'.

Setting interactions between the chatbot and the user

First, we will need some Variables. 

  1. Click the Variables icon {$} at the bottom of the Quick Tools bar. Add four variables:
  • randomMsg1 - Default value: UXPin is a code-based design tool that merges design and engineering into one unified process.
  • randomMsg2 - Default value: To use the UXPin desktop app, you must be running: On macOS devices, macOS Sierra or later. On Windows devices, Windows 10 in a 64-bit environment. Browser: Mozilla Firefox, Apple Safari, Google Chrome.
  • userMsg - Leave the Default value empty.

Next, we must create interactions for the user's selections.

  1. Select Subject1 from Pages & Layers and click Interactions + at the top of the Properties Panel.
  2. Under Trigger, select Click (Tap).
  3. Under Action, select Show.
  4. Select Reply1 from the Element dropdown.
  5. Click +Add element and Select 2nd Question
  6. Click Add to save the interaction.
  7. Hide Reply1 in Pages & Layers by clicking the eye icon. When the screen initially loads, Reply1 will be hidden and only appear if the user makes a selection.
  8. Repeat steps 1 to 7 above for Subject2. You can also select copy interactions from Subject1 using Ctrl "Shift" "C" and pasting to Subject2 with Ctrl "Shift" "V" .

ButtonNo interaction:

  1. Select ButtonNo from Pages & Layers and click Interactions + at the top of the Properties Panel.
  2. Under Trigger, select Click (Tap).
  3. Under Action, select Show.
  4. Select Thank You message from the Element dropdown.
  5. Click Add to save the interaction.

ButtonYes interaction:

  1. Select ButtonYes from Pages & Layers and click Interactions + at the top of the Properties Panel.
  2. Under Trigger, select Click (Tap).
  3. Under Action, select Show.
  4. Select User Input from the Element dropdown.
  5. Click Add to save the interaction.

Displaying the Variables:

  1. Select Subject1 from Pages & Layers and click Interactions at the top of the Properties Panel and New interaction.
  2. Under Trigger, select Click (Tap).
  3. Under Action, click More..., and select Set Content.
  4. Select Reply1 from the Element dropdown.
  5. Under Set content as select Value of variable and then randomMsg1 from the dropdown below.
  6. Click Add to save the interaction.
  1. Select Subject2 from Pages & Layers and click Interactions at the top of the Properties Panel and New interaction.
  2. Under Trigger, select Click (Tap).
  3. Under Action, click More..., and select Set Content.
  4. Select Reply1 from the Element dropdown.
  5. Under Set content as select Value of variable and then randomMsg2 from the dropdown below.
  6. Click Add to save the interaction.

Setting up interactions for the user's input component:

  1. Select the Icon in the User Input group from Pages & Layers and click Interactions + at the top of the Properties Panel.
  2. Under Trigger, select Click (Tap).
  3. Under Condition, select Content of element, then Input from the second dropdown and "Is not empty" below that.
  4. Click Add condition to save.
  5. Under Action, select Set Variable.
  6. Under Variable, select userMsg.
  7. Under Set Variable as select Content of element and then Input from the dropdown below.
  8. Click Add to save the interaction.
  1. Click New interaction.
  2. Under Trigger, select Click (Tap).
  3. Under Condition, select Content of element, then Input from the second dropdown and "Is not empty" below that.
  4. Under Action, select Show.
  5. Select User Reply from the Element dropdown.
  6. Click Add to save the interaction.
  1. Click New interaction.
  2. Under Trigger, select Click (Tap).
  3. Under Condition, select Content of element, then Input from the second dropdown and "Is not empty" below that.
  4. Under Action, click More..., and select Set Content.
  5. Select User Reply from the Element dropdown.
  6. Under Set content as select Value of variable, then userMsg from the dropdown below.
  7. Click Add to save the interaction.
  1. Click New interaction.
  2. Under Trigger, select Click (Tap).
  3. Under Condition, select Content of element, then Input from the second dropdown and "Is not empty" below that.
  4. Under Action, select Show.
  5. Select Reply2 from the Element dropdown.
  6. Under Animation settings, set the Delay to "1000ms"
  7. Click Add to save the interaction.

Open/close the chatbot window

We want to give the user control to open and close the chatbot window.

  1. Select Open chat from Pages & Layers and click Interactions + at the top of the Properties Panel.
  2. Under Trigger, select Click (Tap).
  3. Under Action, select Show.
  4. Select Chat window from the Element dropdown.
  5. Click Add to save the interaction.
  1. Select Quit from Pages & Layers (inside the Top bar group) and click Interactions + at the top of the Properties Panel.
  2. Under Trigger, select Click (Tap).
  3. Under Action, select Hide.
  4. Select Chat window from the Element dropdown.
  5. Click Add to save the interaction.

We must hide everything so only the Open chat icon is visible when the screen loads.

  1. Click the eye icon next to the following group layers to hide them:
    Reply1
    2ndQuestion
    User Reply
    Thank You message
    Reply2
    User Input
  2. Leave the Top bar, WelcomeQuestion, and Box layers visible.
  3. Lastly, hide the Chat window layer, so only the Open chat icon is visible.

When the screen loads, the user will only see the chat icon until they click it and start engaging with the user interface.