Rasa Webchat

Rasa

Use the socketio channel. To process customData in Rasa, you must create a custom channel using rasa_core.channels.socketio as a template. In your custom channel, customData is accessible via data['customData'].

Botfront

If using Botfront with a multilingual bot, you must specify the language in the customData prop.

Example for Botfront:

customData={{language: 'en'}}

Rules allow the webchat to automatically send messages based on user behavior. A rule consists of a payload (the message to send) and a trigger object.

Supported trigger conditions include:

• url: Match specific URLs or patterns.
• timeOnPage: Time spent on the page.
• numberOfVisits / numberOfPageVisits: Frequency of visits.
• device: Specific device types.
• when: Set to 'always' or 'init'.
• queryString: Match specific URL parameters.
• eventListeners: Trigger based on DOM events (e.g., clicks) using a CSS selector and an event name.

rules: [
  {
    payload: 'Hello! Welcome back.',
    trigger: {
      when: 'always',
      url: '/contact-us'
    }
  },
  {
    payload: 'Need help?',
    trigger: {
      timeOnPage: 30000, // 30 seconds
      eventListeners: [
        { selector: '.help-button', event: 'click' }
      ]
    }
  }
]

To specify where the conversation state is stored in the browser, use the storage key inside the params object.

Supported values:

• "local": Uses localStorage. Persists after the browser is closed. Cleared when cookies are cleared or localStorage.clear() is called.
• "session": Uses sessionStorage. Persists on page reload but is cleared when the tab or browser is closed, or when sessionStorage.clear() is called.

params={{
  storage: 'local' // or 'session'
}}

Use the customMessageDelay prop to control how long the widget waits before showing a received message. The function receives the message string and must return a number representing milliseconds.

(message) => {
    let delay = message.length * 30;
    if (delay > 2 * 1000) delay = 3 * 1000;
    if (delay < 400) delay = 1000;
    return delay;
}

To trigger a message from your React application, use a ref to access the RasaWebchat component instance and call its sendMessage method.

You can send plain text or force an intent with entities using the format: /intentName{"entityName":"value"}.

function myComponent() {
    const webchatRef = useRef(null);
    
    function callback() {
        if (webchatRef.current && webchatRef.current.sendMessage) {
            // Sends a message with a forced intent and entity
            webchatRef.current.sendMessage('/myIntent{"entityName":"value"}');
        }
    }
    
    return (
        <>
            <button onClick={callback}>Send Intent</button>
            <RasaWebchat ref={webchatRef} />
        </>
    );
}

The params prop can be used to customize the dimensions of images within the widget.

params={{
  images: {
    dims: {
      width: 300,
      height: 200
    }
  }
}}

You can trigger custom code based on socket events or widget lifecycle events using onSocketEvent and onWidgetEvent.

Socket Events include 'bot_uttered', 'connect', and 'disconnect'.

Widget Events include 'onChatOpen', 'onChatClose', and `'onChatHidden' .**

// Example socket events
onSocketEvent={{
  'bot_uttered': () => console.log('the bot said something'),
  'connect': () => console.log('connection established'),
  'disconnect': () => doSomeCleanup(),
}}

// Example widget events
onWidgetEvent={{
  onChatOpen: () => console.log('Chat opened'),
  onChatClose: () => console.log('Chat closed'),
}}

Use these props to control how the widget connects to the server and manages user sessions:

• connectOn: Determines when the socket connection is established. Options are 'mount' (connect immediately when component mounts) or 'open' (connect when the chat is opened).
• autoClearCache: If true, the widget checks the age of the local session. If it's older than 30 minutes, it clears the cache.
• storage: An object used to manage local session storage (interacts with SESSION_NAME).
• initPayload: A string sent to the bot as a user_uttered event immediately after the widget is initialized and connected.
• customData: An object sent along with the initPayload and tooltips to provide additional context to the bot.

Control the visual elements and tooltips of the chat interface:

• tooltipPayload: A string sent to the bot as a user_uttered event to trigger a tooltip (e.g., a 'Help' prompt).
• tooltipDelay: The delay in milliseconds before the tooltipPayload is sent.
• isChatVisible: Controls whether the chat widget is visible on the screen.
• isChatOpen: Controls whether the chat window is expanded/open.
• fullScreenMode: If true, the chat interface occupies the full screen.
• badge: A number displayed on the launcher to indicate unread messages.
• inputTextFieldHint: The placeholder text for the message input field (defaults to 'Type a message...').
• profileAvatar: URL for the user's profile image.
• showCloseButton / showFullScreenButton: Boolean flags to toggle visibility of these buttons in the header.