<gevme-chat />

Description

Renders a customizable chat component

🐞
Rebar Widgets

Name
Type
Description

defines the channel Id

defines the channel Id

defines the height as it is position to fixed

Enum

defines the label of the chat room when drawer is visible

defines the theme dark/light

defines where the chat to pop up

defines the width the chat can consume

Usage

<gevme-chat /> explicitly adds a customised chat component onto a template.

In order to have this generated as a window app, template should have the following sdk which already defined automatically on the template:

https://myxp-template.gevme.com/static/widgets/sdks/chat-sdk.js

Example

In the template, we may use a button to manually trigger a chat frame. The sample script snippet is shown below:

try {
  const chatBtn = document.querySelector('#chat') // provided that this button is custom made from template
  if (chatBtn) {
    chatBtn.addEventListener('click', function () {
      const GevmeChatIframe = document.querySelector('#GevmeChat') // frame that is generated from chat-sdk.js
      if (GevmeChatIframe) {
        GevmeChatIframe.contentWindow.postMessage(
          JSON.stringify({ action: 'open', type: 'chat' }), // action: close (for closing)
          '*',
        )
      }
    })
  }
} catch (error) {
  console.error(error)
}

This can be used with a gevme-chat tag with attributes for generating a chat app:

<button type="button" id="chat">Open Chat</button>
<gevme-chat settings='{"channel": "-vod-general-training-day3-chat", 
                       "channelName": "VOD Day 3 General Training", 
                       "mode": "dark", 
                       "label": "Chat", 
                       "width": "300px", 
                       "position": "right", 
                       "height": "80%"}' />

The code above opens a chat on the livepage when the button is clicked:

image