Installation

This SDK consist in a Vanilla JS library that will, ultimately, render the MeetingDoctors web client on the integrators page. For the integrator it will be necessary to integrate the JS, and also a custom CSS file to override the applied styles.

JavaScript

The first option to import the JS would be to insert a scrtipt on the HTML document pointing to the aimed version. This would expose a new object (the library) attached at the Window object

You can call the methods then, in the following way:

/public/index.html
<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />

   // Main app styles
   <link href="https://sdk.staging.meetingdoctors.com/static/css/main.css" rel="stylesheet"/>
   
   // Custom app styles (depending on your configuration)
   <link href="https://sdk.meetingdoctors.com/brands/XXXXX/theme.css" rel="stylesheet"/>
   ...
</head>
<body>

// Main app script
<script src="https://sdk.staging.meetingdoctors.com/static/js/main.js"></script>

// App initializer
<script>
document.addEventListener("DOMContentLoaded", function () {
 window.meetingdoctors.initialize({
   apiKey: "XXXXXXXXXXXXXXX",
   jwt: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   displayMode: "widget",
   language: "en",
   defaultOpen: false
   ...
 })
}, !1)
</script>
...
</body>
</html>

note

Production: sdk.meetingdoctors.com | Staging: sdk.staging.meetingdoctors.com

info

All data filled in with XXXX must be provided by MD

Available initialization parameters:

Options

Key	Required	Type	Description
`apiKey`	True	String	Key provided by MeetingDoctors identifying the company.
`jwt`	True	String	Session token retrieved from server to a server autherntication process explained in the next step.
`language`	True	String	Available languages: Spanish (es), English (en), Portuguese (pt).
`displayMode`	True	String	Defines the display mode of the SDK. Available modes: “widget”, “contained”.
`containerId`	False	String	if displayMode=“contained”, this parameter specifies the container.
`defaultOpen`	False	String	if displayMode=“widget” and defaultOpen=true, the widget will automatically open after initialization.
`landingPage`	False	Object	Displays a customable landing page on the SDK
`customLoginEmail`	False	Object	Sets the login to a customable login form (checkout login for more info)
`loginSms`	False	Object	Sets the login to a customable SMS form (checkout login for more info)

Key	Required	Type	Description
`title` (customLoginEmail)	False	String	The title pof the login form
`intro` (loginSms)	False	String	The title pof the login form
`fields`	False	Array	An array of objects (checkout fields for more info)

Key	Required	Type	Description
`name`	True	String	the id of the field. Avaliable fields: `name`, `birthDate`, `phone`,`email`, `lopd`, `commercial`
`validations`	True	String	The validations of the actual field. Avaliable validations: `required`, `age18`, `phoneValid`, `emailValid`
`text`	True (ony on `lopd` fields)	String	Customable text description of the field
`actions`	False (ony on `lopd` fields)	Array	Array of objects with two properties: `word` (determinates witch string is gonna be a link) and `href` (the actual link of redirection)

Then you can call any method on the library like

meetingDoctors.initialize({...args});

Library API

Args

Args will be an object with the following defined keys, this object will be interpreted in the Initialize method and will trigger the execution of the SDK

`containerId`

containerId string : indicates the Id of the doom element in which you want to render the app. If no contaierId is provided, the application will be rendered in FullScreen mode

`JWT`

jwt string : is the JWT provided by meetingDoctors af a particular user. Using this JWT the whole library will authenticate as said user There are many ways to obtain the WJT, depending on the integration strategy.

Methods

initialize({ jwt , containerId })

The initialize function will trigger the Render of the meetingDoctors app This method will internally call the two following ones

authenticate(jwt)

The authenticate function will take a jwt and use it to initialize against all the services of meetingDoctors. This way, the SDK can connect with the notifications and chat service.

mount(containerId)

Once you have authenticated the widget, you can render it inside any element of your DOM that has a given width and height, and an Id(unique) to reference it. Depending on the dimensions of said element, the widged will be rendered as partial views or full view.

Styles

The SDK provides some of the styles for a proper render of the Chat, but it is just a default styling of the chat.

The integrator can also add an upper layer of CSS to override the styles and customize to deliver the same look & feel than the rest of the page.

An initial template of the customizable CSS classes will be provided with the package installation.

To generate new template from themeTemplate.scss u use this command line

BRAND=someBrand npm run theme-generate

Events

/**
  * The `on` method allows you to listen to events emitted by the SDK.
  * 
  * Events currently available:
  * 
  * - `termsAccepted`: Emitted when the user accepts the terms and conditions (it depends on the company configuration).
  * 
  * - `firstSessionMessage`: Emitted when the user sends a message for the first time in a session.
  * 
  * - `roomOpened`: Emitted when the user opens a room.
  * 
  * @param {'termsAccepted' | 'firstSessionMessage' | 'roomOpened'} eventName - The name of the event to listen to.
  * @param {void} callback - The function to call when the event is emitted.
  * 
  * @example
  * window.meetingdoctors.on('roomOpened', () => {
  *     console.log('📝 roomOpened');
  * });
  * 
*/
on(eventName: 'termsAccepted' | 'firstSessionMessage' | 'roomOpened', callback: void): void;

Installation

JavaScript​

Available initialization parameters:​

Options​

Custom login Email / SMS options​

Login fields structure​

Library API​

Args​

containerId​

JWT​

Methods​

Styles​

Events​