Documentation - Khoros Flow
  • Getting started
  • Triggers & Replies
  • Actions
  • Integrations
  • Guides
  • API

›Design How To​s

Guides

  • Overview
  • Learn

    • Beginner guide
    • Advanced guide

    Design How To​s

    • How to use timers
    • How to integrate with Zapier
    • How to increase web widget engagement
    • How to use Conditions
    • How to set parameters using buttons
    • How to send conversational reviews
    • Count sessions per Channel or Widget
    • How to use entities instead of multiple intents
    • How to handle multiple inbound messages
    • How to branch your chatbot
    • How to capture user input
    • How to change the language of your bot
    • How to clear the Flow web widget
    • How to create an Arabic speaking bot
    • How to create and manage multiple chatbots
    • How to create buttons
    • How to duplicate flows
    • How to export and duplicate a project
    • How to handle unknown input
    • How to use string templates
    • How to jump to the middle of a flow
    • How to loop flows
    • How to re-use intents
    • How to reset your password
    • How to schedule and broadcast chatbot messages
    • How to structure flows
    • How to use Business Hours
    • How to use carousels
    • How to use data to create context
    • How to use Quick Replies
    • How to pause a bot
    • How to send and receive files or attachments
    • How to deal with unexpected input
    • How to gather user feedback
    • How to track links
    • How to use WhatsApp click to chat links
    • How to accept payments
    • How to deflect calls to WhatsApp
    • How to delay replies
    • How to engage with customers using SMS
    • How to import contacts
    • How to test your WhatsApp chatbot
    • How to use Messenger m.me links
    • How to do multi-channel design

    Code How To​s

    • Code actions best practices
    • How to trigger channel specific flows
    • How to use math in a bot
    • How to create a location-aware bot
    • Create Parameters with Cloud Code Actions
    • How to use quick replies in code actions
    • How to add a delayed opening to the web widget
    • How to build a chatbot quiz for WhatsApp
    • How to catch API errors within Code actions
    • How to verify user input
    • How to check if an object property is undefined
    • How to create a dynamic opening based on the part of t…
    • How to create a Dynamic URL
    • How to create a Webview
    • Handle images in 3 steps
    • How to retrieve data from a database
    • How to connect with an external database
    • How to route back to the last flow
    • How to route your chatbot based on numeric input
    • How to send a confirmation email
    • How to send chatbot data to a database
    • How to send emails to multiple recipients
    • How to create Google maps images
    • How to use QR codes
    • How to use Javascript Comments in actions
    • How to send emails
    • How to store Parameters
    • How to capture and validate an address
    • How to find your Organization ID
    • How to work with dates
    • How to integrate with Wordpress
    • How to check if the user is on mobile or desktop
    • How to trigger bot events based on the page
    • How to combine functions in Javascript
    • How to set profile attributes

    Handover How To​s

    • Fallback
    • Chatbot Handoff How to nail the bot to human handoff
    • How to pause and resume a bot in Front
    • How to Enable or Disable Push Notification
    • How to hand over to a human agent
    • Send text versus trigger event
    • How to setup handoff with Front
    • THow to trigger flows inside Front

    Other

    • Audience
    • Projects
    • Analytics
    • Data retention

Multi-channel design - How to create 1 chatbot for WhatsApp, Messenger, and Web

One of the challenges that many companies face when starting with AI chatbots and conversational interfaces is the channel that they want to integrate with.

At Flow.ai, we encourage you to be there, where your customer wants you to be in a channel-agnostic way. Being channel agnostics means that you are focussing on the message and person that you want to deliver your message to and not thinking in channels.

To enable companies to design omnichannel experiences we’ve launched our channel-specific design.

Omnichannel chatbot

Channel-Specific Design

Creating 1 chatbot to rule all channels sounds great, and it is, but… Each channel has its own advantages and disadvantages. Take WhatsApp for example, in Europe that is the most popular messaging channel which offers a lot of potential for customer interactions. On the other hand, WhatsApp does not support Cards, Carousels and buttons. For reference have a look at the pros and cons of a WhatsApp chatbot.

Those Rich UI elements like buttons, cards and carousels, can enhance the Customer Experience and are supported in Facebook Messenger and the Web Widget but not in WhatsApp. That means that if you’re using these elements, you should alter your workflow for WhatsApp. And there we go, our Channel Specific Design feature is here to help!

Create an omnichannel chatbot in 3 steps

1. Enable Channel Specific Design

After enabling Channel Specific Design in the Project settings you can start using the feature from within the Flows sections. So head over to Flows!

2. Create shared elements

Within the shared tab, you can only drag & drop elements that are supported by all your selected channels. In our example, text replies is one of the elements that is supported by WhatsApp, Messenger and Web so let’s drag and drop that onto our canvas.

3. Tailor to each channel specific

After creating shared elements, we can now start tailoring the elements to each channel. Let’s have a look at the Web Widget that supported rich UI elements such as cards and buttons.

Chatbot Flow.ai 360Dialog WhatsApp

As WhatsApp does not support these cards, buttons and carousels we can now easily alter the workflow with elements that are supported by WhatsApp such as text.

Chatbot Flow.ai 360Dialog WhatsApp

Test your Omnichannel chatbot

We know it’s exciting but don’t forget to test your experience properly. You can ask colleagues and friends to try it out on different channels. Try it out with WhatsApp Testing or share the Web Widget URL. After testing, improve your bot and repeat the process until it’s ready for a first launch!

← How to use Messenger m.me linksCode actions best practices →
  • Channel-Specific Design
  • Create an omnichannel chatbot in 3 steps
    • 1. Enable Channel Specific Design
    • 2. Create shared elements
    • 3. Tailor to each channel specific
  • Test your Omnichannel chatbot
Docs
Getting StartedBasic conceptsGuides
Platform
StatusSlack community
Resources
Blog
Copyright © 2021 Khoros Flow