<gevme-chat />

Description

Renders a customizable chat component

🐞
Rebar Widgets

Name
Type
Description
channel

defines the channel Id

channelName

defines the channel Id

height

defines the height as it is position to fixed

label
Enum

defines the label of the chat room when drawer is visible

mode

defines the theme dark/light

position

defines where the chat to pop up

width

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