<gevme-chat />

Description

Renders a customizable chat component

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:

<gevme-chat />

🐞Rebar Widgets

Usage

Example

🐞
Rebar Widgets