Help Center

How to build your first chat interface

Time has gone when building chat interfaces required advanced coding skills. Platforms like WeConnect.Chat lets you build conversational chat interfaces across many communication channels without writing a line of code. Doesn’t that sound cool?

This article will guide you, step by step, on how to build a demand-generation chat interface using the WeConnect.chat platform.

Later, We’ll see how to test a brand-new chat interface and find out how you can easily deploy it to your website.

To create your chat interface using the WeConnect platform, you need to have an active WeConnect account. To create your account, visit Weconnect.chat and sign up as a new user.

WeConnect offers a free trial, so you can build your chat interface during that time. You can extend your trial by completing a short feedback form. 

Let’s start building a chat interface!

  1. After creating your account, you’ll land on the application dashboard where you can create a new chat interface. Refer screenshot below to continue.chat interface
  2. There are three ways to create your new chat interface
  3. Create from Scratch
    1.  Click on “create from scratch”
    2. Name your chat interface as “Demand Generation Bot”. (We are using this as an example you can create for any use case as per your need)
    3. Select language “English” for your chat interface. We will cover Multi-lingual topic in more detail latercreate from scratch
    4. Click on button “Create and Next”
    5. After creating your first chat interface, you’ll be transferred to our interactive step by step Builder.
    6. Refer section “Using Builder” later in this page.
  4. Use existing templates
    1. Click on “Use Template“
    2. You will see list of readymade templates for popular use cases
    3. Click on “Preview” to see the existing flow designed for the template use case
    4. If you like the flow, click on “Use Template”
    5. After clicking “Use template”, you’ll be transferred to our interactive step by step Builder.
    6. Refer section “Using Builder” later in this page.
  5. Import existing chat interface
    1. Click on “Import Chat interface“
    2. You will get file explorer to select a “JSON” file of existing chat interface
    3. You need to export any other chat interface before using the import option
    4. After successfully selecting the “JSON” file, you’ll be transferred to our interactive step by step Builder.
    5. Refer section “Using Builder” later in this page.

Using Builder

WeConnect.chat platform is powered to take care of all complexities in creating a chat interface.  With no-code interactive step by step chat builder, it’s get very easy to deliver great conversational experience to your audience.

  1. Get Familiar with builder screenusing builder
  2. Start building the flow by using “Chat component selector”. This will show a popup with list of all available components to use for your conversation flow.using builder select components
  3. Select any component from list to start building
  4. For our flow lets start with greeting message so we will use component “Simple Message”
  5. Type the message you want to show in chat as a greeting. Apply required styling, emoji. You can also use images and GIF’s to greet your visitors.
  6. Lets type “Thanks for visiting, I am here to help you! ” Click on Save.welcome message
  7. Next component, lets ask the interest, so we will use component “Multiple choice”
  8. Let’s ask “Are you interested in trying our product?”  Add choices and Save.
    1. Choice 1: “Yes, I am interested”
    2. Choice 2: “Later”later option image
  9. Next component, lets grab the email to get the lead to follow
  10. Use email component, message “Can you drop an email so we can share you product updates?”
  11. Further we can offer an instant live chat or Video chat if visitor is interested by selecting Choice 1. To support this we need to add next component “Live Chat / Human takeover”
  12. Use message “How do you want to interact with us?”
    1. Choice 1: “Live Chat”
    2. Choice 2: “Live Video”Live chat or live video
  13. Finally we can ask to rate a conversation using Rating component
  14. Now our chat flow is ready and we can deploy this on any website. 
  15. Refer below screenshot to see how the builder screen will look for this chat interface example
  16. You can drag and drop the components from list and shuffle the sequence of component, just use the drag handle icon given on left side of each component in the flow

chat interface

 
Note: Please refer to Chat Components article for detailed info on how to use each component

Related Contents