Frontend React web chat component is supposed to be used within the wingbot.ai infrastructure.

                       |‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
|‾‾‾‾‾‾‾‾‾‾‾‾|         |           chatbot infrastructure         |
| host page  |         |             (AWS/Azure/Docker)           |
|            |         |                                          |
| |‾‾‾‾‾‾‾‾| |         | |‾‾‾‾‾‾‾‾‾‾‾‾‾‾|         |‾‾‾‾‾‾‾‾‾‾‾‾‾| |
| |  chat  |-|- https -|-|  wingbot.ai  |         | chatbot app | |
| | widget |-|-- wss --|-|  Messaging   |- https -|    with     | |
| |________| |         | | Orchestrator |         | wingbot lib | |
|____________|         | |______________|         |_____________| |
  users web            |         |                       |        |
   browser             | |‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾| |
                       | |            MongoDB database          | |
                       | |______________________________________| |
                       |__________________________________________|

Above the all low-level security options like firewalls, WAFs and on, the chat itself provides additional security features

• web page whitelisting (XHR Referrer)
• IP whitelisting
• Session bound conversation (when user signs-out, the conversation is removed)
• OAuth/OpenID/SAML authentication (XHR, background i-frame, redirect)

The chat widget can be deployed by following methods:

• React component
• Append to HTML element
• CDN Hosted - HTML snippet method

UI component within a JSX component

import { WingbotChat } from 'wingbot-chat-ui';

export default function MyChatComponent (props) {

    return (
        <WingbotChat
            pageId="<put your page-id here>"
            contextUserAgentProp="ua"
            contextScreenResolutionProp="sr"
        />
    );
}

SCSS style

Include following CSS style for deploying a default chat style

$ff: BlinkMacSystemFont, -apple-system, "Segoe UI", Rubik, Helvetica, Arial, sans-serif;

@use '~wingbot-chat-ui/scss/fontRubik' with (
    $wb-font-path: '~wingbot-chat-ui/scss/fonts'
);
@use '~wingbot-chat-ui/scss/general' with (
    $chat-font-family: $ff,
    $chat-square-btn: true
);

Just in case if your project is not built on React

import 'regenerator-runtime/runtime';
import { createWingbotChat } from 'wingbot-chat-ui';

const wingbotChat = createWingbotChat();

// replace with an immutable DIV element
const element = document.getElementById('chat');

wingbotChat('init', {
    pageId: '<put your page-id here>',
    contextUserAgentProp: 'ua',
    contextScreenResolutionProp: 'sr'
}, element);

On the example below you can see the minimal setup for connecting the Wingbot webchat to a website.

<link href="https://orchestrator.wingbot.ai/styles/wingbotChat.css" rel='stylesheet' type='text/css'>
<div id="chat"></div>
<script>
    window.wingbotChatCmds=window.wingbotChatCmds||[];
    window.wingbotChat=window.wingbotChat||function(){wingbotChatCmds.push(arguments)}

    wingbotChat('init', {
        pageId: '<put your page-id here>',
        contextUserAgentProp: 'ua',
		contextScreenResolutionProp: 'sr'
    }, document.getElementById('chat'));
</script>
<script async src="https://orchestrator.wingbot.ai/wingbotChat.js"></script>

• CSS styles
  • link with the basic webchat theme, working out of the box
  • feel free to create your own and replace it
• Physical representation
  • <div id="chat"></div> is physical representation of the webchat
  • it can be placed anywhere in your website
• Webchat configuration
  • this part is mostly for configuration the webchat configuration
  • pageId is mandatory and unique, if you don't know your pageId feel free to contact Wingbot support
  • document.getElementById can be set to any existing element in the website
• Source to the webchat code
  • the last line of the example is link to the actual webchat app
  • please do not download it and/or cache it somewhere in your infrastructure if you want to have the latest and the most secure version of Wingbot webchat

As we saw in the example above, webchat is configurable with 3 parameters.

Lets have a look little bit deeply about the configuration right now:

webchat (
    'init',    // `'init'` command should be always called to start a chat
    element,   // DOM element which is representation of the chat on the page
    config     // object with webchat configurations
);

There are supported parameters for the config object:

Animation sequence

list of animation frames with transitions

{i: string|ReactElement,animate?:string,timeout?:number}[]

• i - string (emoji) or react element
• animate - name of transition effect from (animate.style)[https://animate.style]
• timeout - time in ms (default: 2000)

onlineAnimationSequence: [
    {
        i: (
            <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 11.5C0 5.14873 5.14873 0 11.5 0V0C17.8513 0 23 5.14873 23 11.5V23H11.5C5.14873 23 0 17.8513 0 11.5V11.5Z" fill="#1FFFB4" />
            </svg>
        )
    }
]

Persistent menu

persistentMenu: [
    {
        locale: 'default',
        call_to_actions: [
            {
                type: 'postback',
                title: 'Button Title',
                payload: 'address'
            }
        ]
    }
]

Because the frontend is in a separate repository, you must first link the frontend to the backend during development, and then run auto build.

Linking can be done via the utility link: https://docs.npmjs.com/cli/link, like this:

cd ~/<local_repo_path>/wingbot-chat-ui
npm link
cd ~/<local_repo_path>/wingbot-ai-orchestrator
npm link wingbot-chat-ui

Also, to have working React hooks, you need to link React library from chat to orchestrator

cd ~/<local_repo_path>/wingbot-chat-ui
npm link <orchestrator_path>/node_modules/react

Next, you need to run the command in the root of the wingbot-chat-ui project:

npm run develop

Furthermore, it is normally possible to continue the webchat project with the command:

npm run start