Documentation

Creating the Chat

JavaScript Import

You need to import 

<script type="text/javascript"
            src="https://chat.preprod.rofim.doctor/assets/main.js">
</script>

HTML Integration

<sana-widget
    id="widget-1"
    displaymode="EMBEDDED">
</sana-widget>

JavaScript Event Handling

// Get the element via Javascript
let rofimWidgetHtmlElement = document.getElementsByTagName('sana-widget')[0];
// Add an event listener
rofimWidgetHtmlElement.addEventListener('m.rofim.ready', (event) => {
    const widgetId = event.target.id;
    console.log(event.target.id);
    console.log(JSON.stringify(event.detail));
});
/*
    Possible events:
    - m.rofim.ready
    - m.rofim.new-message
    - m.rofim.message-read
    - m.rofim.lightbox-deployed
    - m.rofim.lightbox-folded
    - m.rofim.all-notifications-have-been-read
*/

Using the API

// Get the element via Javascript
let rofimWidgetHtmlElement = document.getElementsByTagName('sana-widget')[0];
// Call the API
rofimWidgetHtmlElement.markAllAsRead()
    .then(() => {
        console.log('markAllAsRead successful');
    })
    .catch((error) => {
        console.error('Error during markAllAsRead:', error);
    });
/*
    Available API elements:
    - show()
    - hide()
    - toggleVisibility()
    - getUnreadMessagesNumber()
    - markAllAsRead()
    - deployLightbox()
    - foldLightbox()
    - getRoom(roomId: string)
    - sendMessage(roomId: string, message: Message)
    - createRoom(roomCreationRequest: RoomCreationRequest)
*/

Define the whitelabel

Directly when creating the HTML component
<sana-widget
    id="widget-1"
    displaymode="EMBEDDED"
    whitelabelid="dummy-id">
</sana-widget>
Or via JavaScript
let rofimWidgetHtmlElement = document.querySelector("#widget-1");
rofimWidgetHtmlElement.whitelabelid = 'dummy-id';




Chat Customization

Change Display Mode

Directly when creating the HTML component
<sana-widget
    id="widget-1"
    displaymode="LIGHTBOX"
    locale="fr-FR">
</sana-widget>
Or via JavaScript
let rofimWidgetHtmlElement = document.querySelector("#widget-1");
rofimWidgetHtmlElement.displaymode = 'LIGHTBOX';


Change Language

Directly when creating the HTML component
<sana-widget
    id="widget-1"
    displaymode="EMBEDDED"
    locale="en-GB">
</sana-widget>
Or via JavaScript
let rofimWidgetHtmlElement = document.querySelector("#widget-1");
rofimWidgetHtmlElement.locale = 'en-GB';


Hide on startup

Directly when creating the HTML component
<sana-widget
    id="widget-1"
    displaymode="EMBEDDED"
    hiddenonstartup="true">
</sana-widget>
Or via JavaScript
let rofimWidgetHtmlElement = document.querySelector("#widget-1");
rofimWidgetHtmlElement.hiddenonstartup = "true";


Customization

Change Colors

Change Radius

Directly when creating the HTML component. You should put Valid JSON value (simple quote and double quote)
<sana-widget
    id="widget-1"
    displaymode="EMBEDDED"
    uicustomizations='{"primaryColor":"#3bf75a", "surfaceColor":"#64748b", "radius":10, "sentMessageBackgroundColor":"#f7f408", "sentMessageTextColor":"#f70808", "readMessageIconColor":"#000000"}'>
</sana-widget>
Or via JavaScript
let rofimWidgetHtmlElement = document.querySelector("#widget-1");
rofimWidgetHtmlElement.uicustomizations = {
    primaryColor:'#E66465',
    surfaceColor:'#F3D8D8',
    radius:'10',
    sentMessageBackgroundColor:'#f7f408',
    sentMessageTextColor:'#f70808',
    readMessageIconColor:'#000000'
};


Customize file upload

You can add custom buttons behaviour using Javascript to upload file from a specific location.
Use the typescript definition : UploadCallbacksConfig and add it to your RofimWidget Element.
TODO : Doc URL
Callback ready :
Here is a sample code that :
  • Define a callback using an alias function : [FUNCTION_NAME]
  • And use our API to send blob file as URL : [sendFileMessage]
let rofimWidgetHtmlElement = document.querySelector("#widget-1");
rofimWidgetHtmlElement.uploadcallbackconfig = {
      callbacks: [
        {
          key: 'url-uploader',
          buttonLabel: 'Custom upload',
          title: 'Upload les fichiers à partir d\'une URL',
          icon: 'pi pi-link',
          callbackRef: {
            type: 'FUNCTION_NAME',
            value: 'aliasUploadUrl',
          },
        },
      ],
    };

And somewhere else in your DOM, you must declare the callback function
<script>
  function aliasUploadUrl(context) {

      showToast('info', 'Information', 'Called callback with context : ' + JSON.stringify(context));

      const uploadFileUrlInput = document.getElementById('upload-file-url');
      let urlValue = uploadFileUrlInput.value;
      let rofimWidgetHtmlElement = document.querySelector('#widget-1');
      rofimWidgetHtmlElement.sendFileMessage(context.securityToken, {
              type: 'file',
              securityToken: context.securityToken,
              uploadFile: {
                  type: 'URL',
                  url: publicUrlImageFile,
              },
          })
          .then(() => {
              showToast('info', 'Information', 'sendFileMessage successful for token : ' + context.securityToken);
          })
          .catch((error) => {
              showToast('error', 'Error', 'Error during sendFileMessage for token : ' + context.securityToken);
              console.error('# CALLBACK ALIAS : Error during sendFileMessage:', error);
          });
  }
  </script>

Messaging Component Demo

This component allows you to easily integrate secure messaging into your application. Customizable and responsive, it adapts to all your needs.