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.
https://docs.rofim.doctor/docs/integration#custom-file-upload
Callback ready :
Here is a sample code that :
  • Define an Upload 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>


Resource sharing

You can add custom buttons behaviour using Javascript to send a formatted resource from your system.
Use the typescript definition : ResourceCallbackConfig and add it to your RofimWidget Element.
https://docs.rofim.doctor/docs/integration#resource-sharing
Callback ready :
Here is a sample code that :
  • Define a Resource callback using an alias function : [FUNCTION_NAME]
  • And use our API to send Patient resource : [sendResource]
  • Listen the [m.rofim.resource-clicked] event to know when a resource is clicked
let rofimWidgetHtmlElement = document.querySelector("#widget-1");
rofimWidgetHtmlElement.resourcecallbackconfig = {
          onClickAction: 'OPEN_TAB',
          callbacks: [
            {
              key: 'share-resource',
              buttonLabel: 'Envoyer une ressource',
              buttonTitle: 'Envoyer une ressource',
              icon: 'pi pi-file-plus',
              callbackRef: {
                type: 'FUNCTION_NAME',
                value: 'aliasShareResource',
              },
            },
          ],
        };

And somewhere else in your DOM, you must declare the callback function
<script>
  function aliasShareResource(context) {
        console.log('# CALLBACK ALIAS : "aliasPushResource" with context : ' + JSON.stringify(context));
        let rofimWidgetHtmlElement = document.querySelector('#widget-1');
        rofimWidgetHtmlElement.sendResource(context.securityToken, {
          type: 'PATIENT',
          cardIcon: 'demography',
          cardTitle: 'Fiche Patient',
          title: 'Jean-Edouard de Breteuil',
          description:
            'Jean-Edouard de Breteuil
  • age: 35ans
  • région: Aix en provence

IPP: 12345678',
          linkLabel: 'Ouvrir le dossier',
          url: new URL('https://staging.rofimoncloud.com/secure/actualites'),
          payload: {
            key1: 'value1',
            key2: 'value2',
            key3: true,
            key4: 38,
            key5: 'super payload!',
            subkey1: {
              key11: 'value1',
              key12: false,
              key13: 42,
            },
          },
          patient: {
            lastName: 'De Breteuil',
            firstName: 'Jean-Edouard',
            birthdate: '1990-10-18',
            gender: 'MALE',
            ipp: '12345678',
          },
        });
      }
  </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.