Moxtra Chat Widget for Web

Embed the different Moxtra Chat modules into your web application using the simple JavaScript calls mentioned in this document. If more than one modules are used, it is more efficient when switching the embedded module using iframe with the same tag ID in "tagid4iframe".

Chat (Full View)

Embed the full Chat view that includes Pages, To-Do and Meet options inside your application:

Optional parameters to include in Moxtra.chat() API request:
Name Value Description
binder_id Binder ID Optional: if launching the chat using the binder ID (or to join the same Chat).
binder_name Binder Name Optional: if launching the chat using the binder name instead of binder ID.
unique_id The list of unique_id(s) separated by comma (,) Optional: if launching the chat using the list of unique_ids.
email The list of email(s) separated by comma (,) Optional: if launching the chat using the list of email addresses.
iframe "true" or "false" Default is false. Specify to launch the timeline in iframe or in a new window.
tagid4iframe iFrame ID Specify the ID of iframe container - applicable only if iframe in option is set to "true".
border "true" or "false" Default is true. Specify "false" if using iframe inside a tag without border around the iframe.
scroll "true" or "false" Default is false. Specify "true" if using iframe inside a tag adding scroll bar around the iframe.
iframewidth iFrame Width Width of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 1024px. If container controls the width, please set to 100%.
iframeheight iFrame Height Height of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 768px. If container controls the height, please set to 100%.
invite_members "true" or "false" Default is false. Specify to auto invite all current binder members when starting a Meet if autostart_meet is set to "true".
produce_feeds "true" or "false" Default is false. Specify to produce meet recording feeds in the current binder in a Meet recording if autostart_meet is set to "true".
autostart_meet "true" or "false" Default is false. Specify if Meet should be launched or throw a callback to the SDK.
autostart_note "true" or "false" Default is false. Specify if Clip (Note) should be launched or throw a callback to the SDK.
chat_id Chat ID (= Feed ID) Optional: showing the specified chat item identified by chat_id only if binder_id is set. If other IDs are set as well, the priority order is chat_id, page_id, todo_id, and then file_id.
page_id Page ID Optional: showing the specified page only if binder_id is set. If other IDs are set as well, the priority order is chat_id, page_id, todo_id, and then file_id.
todo_id Todo ID Optional: showing the specified todo item identified by todo_id only if binder_id is set. If other IDs are set as well, the priority order is chat_id, page_id, todo_id, and then file_id.
file_id File ID Optional: showing the specified file only if binder_id is set. If other IDs are set as well, the priority order is chat_id, page_id, todo_id, and then file_id.
extension - Here are the extension options that can be used with the start chat API:

To show or hide the invite member dialog. Default is false.

{ 
    "show_dialogs": { "member_invite": true/false } 
}

To show or hide the share dialog. Default is true.

{ 
    "show_dialogs": { "share": true/false } 
}

To add your own CMS or repository into the add file option.

{ 
    "menus":[{"add_page":[
        {
            "menu_name":"My CMS",
            "position":"bottom",
            "icon":"http://website.com/cms_icon.png"
        }]
    }]
}

Listener to handle the callback on custom add page option.

add_page: function(event) {
    if (event.action == "My CMS") {
     alert ("Clicked on My CMS for Binder Id: " + event.binder_id);
    }
}

To show or hide the UI via Meet tab. Default is true. To get "request_binder_meet" callback when user clicks Meet tab if set to false.

{ 
   "show_binder_meet": false
}

To get "request_binder_settings" callback when user clicks "Settings" menu from Binder detail UI if set to true. Default is false.

{ 
   "binder_settings_callback": true
}

To customize colors in chat SDK, pass a Javasciprt object with following key/value pair. For the acceptable values, it is the same with CSS acceptable color values and units (hex, rgb, rgba and pre-defined color keyword etc).

{ 
   "binder_branding_rules": {
        brandingColor: '#acacac',
        outgoingTextColor: 'rgba(155,155,155,0.7)',
        outgoingBackgroundColor: 'purple',
        incomingTextColor: '#ccc',
        incomingBackgroundColor: 'rga(200,200,200)',
        actorNameColor: 'green',
        systemMessageColor: 'orange',
        chatBackgroundColor: 'orange'
   }
}

tags name - value pairs in JSON array

Specify when autostart_meet is true to set in the Meet. Format:

tags: [
   {
	"name": "TAG_NAME",
	"value": "TAG_VALUE"
   }
]

Moxtra start chat callback events handled through a listener
Event Description Attributes
start_chat Triggered on successful start of chat. session_id, binder_id
error Triggered in the event of an error. error_code, error_message
invite_member Triggered on requesting invite member in the binder without showing "member_invite" dialog. binder_id
request_meet Triggered on requesting start meet without autostart_meet. binder_id
start_meet Triggered on successful start of meet with autostart_meet. session_key, session_id, binder_id
save_meet Triggered when the meet is saved with autostart_meet. session_key, session_id, binder_id
invite_meet Triggered when the invite button is clicked with autostart_meet. session_key, session_id, binder_id
end_meet Triggered when the meet is ended by the host with autostart_meet.
exit_meet Triggered when the attendee leaves the meet with autostart_meet.
leave_binder Triggered on user left the binder. session_id, binder_id
remove_binder_user Triggered on user getting removed from the binder. session_id, binder_id
request_note Triggered on requesting start clip (note) without autostart_note. session_id, binder_id, page_index
start_note Triggered on successful start of clip (note) with autostart_note. session_key, session_id
save_note Triggered when user close and save the clip (note) with autostart_note. destination_binder_id, share_url, download_url
cancel_note Triggered when user close and not save the clip (note) with autostart_note.
share Triggered on share link for selected pages. session_id, binder_id, share_url, download_url
publish_feed Triggered on user performing an action. session_id, binder_id, message
receive_feed Triggered on events done by other binder users. session_id, binder_id, message, title, feed_unread_count
request_view_member Triggered on clicking the user's avatar in Chat. session_id, binder_id, user_id, unique_id
reach_limit Triggered on reaching org or user limitations. session_id, error_code, type, and additional attributes depending on "type":
  • board_history_max: reached max chat history messages; attributes: value, binder_id
  • user_cloud_max: reached user's max storage limitation; attributes: value
request_binder_meet Triggered when the Meet tab is clicked and "show_binder_meet" is set to false via extension options. session_id, binder_id
request_binder_settings Triggered when the "Settings" menu from Binder detail UI is clicked and "binder_settings_callback" is set to true via extension options. session_id, binder_id
view_binder_page Triggered on binder page changed. session_id, binder_id, page_id

Sample code to embed chat for joining (using binder ID):

var options = {
    binder_id: BINDER_ID,
    iframe: true,
    tagid4iframe: "container",
    iframewidth: "920px",
    iframeheight: "650px",
    autostart_meet: true,
    autostart_note: false,
    start_chat: function(event) {
        alert("Chat started session Id: " + event.session_id);
    },
    start_meet: function(event) {
        alert("Meet started session key: " + event.session_key + " session id: " + event.session_id);
    },
    end_meet: function(event) {
        alert("Meet end event");
    },
    invite_member: function(event) {
        alert("Invite member into binder Id: " + event.binder_id);
    },
    request_note: function(event) {
        alert("Clip start request");
    },
    error: function(event) {
        alert("Chat error code: " + event.error_code + " error message: " + event.error_message);
    }
};
Moxtra.chat(options);

Sample code to embed chat to start (using Unique User IDs):

var options = {
    unique_id: "unique_id_02,unique_id_03",
    iframe: true,
    tagid4iframe: "container",
    iframewidth: "820px",
    iframeheight: "450px",
    autostart_meet: true,
    autostart_note: false,
    start_chat: function(event) {
        alert("Chat started session Id: " + event.session_id);
    },
    invite_meet: function(event) {
        alert("Meet invite");
    },
    start_meet: function(event) {
        alert("Meet started session key: " + event.session_key + " session id: " + event.session_id);
    },
    end_meet: function(event) {
        alert("Meet end event");
    },
    invite_member: function(event) {
        alert("Invite member into binder Id: " + event.binder_id);
    },
    request_note: function(event) {
        alert("Clip start request");
    },
    error: function(event) {
        alert("Chat error code: " + event.error_code + " error message: " + event.error_message);
    }
};
Moxtra.chat(options);

Embed only the Chat layer (not the Pages, To-Do etc...) into your application:

Optional parameters to include in Moxtra.chatView() API request:
Name Value Description
binder_id Binder ID Optional: if launching the chatView using the binder ID (or to join the same chat).
unique_id The list of unique_id(s) separated by comma (,) Optional: if launching the chat using the list of unique_ids.
email The list of email(s) separated by comma (,) Optional: if launching the chat using the list of email addresses.
iframe "true" or "false" Default is false. Specify to launch the chatView in iframe or in a new window.
tagid4iframe iFrame ID Specify the ID of iframe container - applicable only if iframe in option is set to "true".
border "true" or "false" Default is true. Specify "false" if using iframe inside a tag without border around the iframe.
scroll "true" or "false" Default is false. Specify "true" if using iframe inside a tag adding scroll bar around the iframe.
iframewidth iFrame Width Width of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 850px. If container controls the width, please set to 100%.
iframeheight iFrame Height Height of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 500px. If container controls the height, please set to 100%.
autostart_note "true" or "false" Default is false. Specify if Clip (Note) should be launched or throw a callback to the SDK.
chat_id Chat ID (= Feed ID) Optional: showing the specified chat item identified by chat_id in the chatView.

Moxtra start chatView callback events handled through a listener
Event Description Attributes
start_chat Triggered on successful start of chatView. session_id, binder_id
error Triggered in the event of an error. error_code, error_message
request_note Triggered on requesting start clip (note) without autostart_note. session_id, binder_id, page_index
start_note Triggered on successful start of clip (note) with autostart_note. session_key, session_id
save_note Triggered when user close and save the clip (note) with autostart_note. destination_binder_id, share_url, download_url
cancel_note Triggered when user close and not save the clip (note) with autostart_note.
share Triggered on share link for selected pages. session_id, binder_id, share_url, download_url
publish_feed Triggered on user performing an action. session_id, binder_id, message
receive_feed Triggered on events done by other binder users. session_id, binder_id, message, title, feed_unread_count
request_view_member Triggered on clicking the user's avatar in Chat. session_id, binder_id, user_id, unique_id
reach_limit Triggered on reaching org or user limitations. session_id, error_code, type, and additional attributes depending on "type":
  • board_history_max: reached max chat history messages; attributes: value, binder_id
  • user_cloud_max: reached user's max storage limitation; attributes: value

Sample code to start chatView in a DIV:

var options = {
    binder_id: BINDER_ID,
    iframe: true,
    tagid4iframe: "container",
    autostart_note: false,
    start_chat: function(event) {
        alert("ChatView started session Id: " + event.session_id);
    },
    request_note: function(event) {
        alert("Clip start request");
    },
    error: function(event) {
        alert("ChatView error code: " + event.error_code + " error message: " + event.error_message);
    }
};
Moxtra.chatView(options);

Pages View

Embed only the Pages layer of the Chat module into your application:

Optional parameters to include in Moxtra.pageView() API request:
Name Value Description
binder_id Binder ID Launching the pageView with the binder ID.
page_id Page ID Optional: instead of showing page thumbnails in the binder, it shows the specified page.
iframe "true" or "false" Default is false. Specify to launch the pageView in iframe or in a new window.
tagid4iframe iFrame ID Specify the ID of iframe container - applicable only if iframe in option is set to "true".
border "true" or "false" Default is true. Specify "false" if using iframe inside a tag without border around the iframe.
scroll "true" or "false" Default is false. Specify "true" if using iframe inside a tag adding scroll bar around the iframe.
iframewidth iFrame Width Width of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 850px. If container controls the width, please set to 100%.
iframeheight iFrame Height Height of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 500px. If container controls the height, please set to 100%.

Moxtra start pageView callback events handled through a listener
Event Description Attributes
start_page Triggered on successful start of pageView. session_id, binder_id
error Triggered in the event of an error. error_code, error_message
share Triggered on share link for selected pages. session_id, binder_id, share_url, download_url
publish_feed Triggered on user performing an action. session_id, binder_id, message
receive_feed Triggered on events done by other binder users. session_id, binder_id, message, title, feed_unread_count
reach_limit Triggered on reaching org or user limitations. session_id, error_code, type, and additional attributes depending on "type":
  • user_cloud_max: reached user's max storage limitation; attributes: value
view_binder_page Triggered on binder page changed. session_id, binder_id, page_id

Sample code to start pageView in a DIV:

var options = {
    binder_id: BINDER_ID,
    iframe: true,
    tagid4iframe: "container",
    start_page: function(event) {
        alert("PageView started session Id: " + event.session_id);
    },
    share: function(event) {
        alert("Share session Id: " + event.session_id + " binder Id: " + event.binder_id + " page Ids: " + event.page_id);
    },        
    error: function(event) {
        alert("PageView error code: " + event.error_code + " error message: " + event.error_message);
    }
};
Moxtra.pageView(options);

To-Do View

Embed only the To-Do layer of the Chat module into your application:

Optional parameters to include in Moxtra.todoView() API request:
Name Value Description
binder_id Binder ID Launching the todoView with the binder ID.
iframe "true" or "false" Default is false. Specify to launch the todoView in iframe or in a new window.
tagid4iframe iFrame ID Specify the ID of iframe container - applicable only if iframe in option is set to "true".
border "true" or "false" Default is true. Specify "false" if using iframe inside a tag without border around the iframe.
scroll "true" or "false" Default is false. Specify "true" if using iframe inside a tag adding scroll bar around the iframe.
iframewidth iFrame Width Width of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 850px. If container controls the width, please set to 100%.
iframeheight iFrame Height Height of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 500px. If container controls the height, please set to 100%.
todo_id Todo ID Optional: showing the specified todo item identified by todo_id in the todoView.

Moxtra start todoView callback events handled through a listener
Event Description Attributes
start_todo Triggered on successful start of todoView. session_id, binder_id
error Triggered in the event of an error. error_code, error_message
publish_feed Triggered on user performing an action. session_id, binder_id, message
receive_feed Triggered on events done by other binder users. session_id, binder_id, message, title, feed_unread_count
reach_limit Triggered on reaching org or user limitations. session_id, error_code, type, and additional attributes depending on "type":
  • user_cloud_max: reached user's max storage limitation; attributes: value

Sample code to start todoView in a DIV:

var options = {
    binder_id: BINDER_ID,
    iframe: true,
    tagid4iframe: "container",
    start_todo: function(event) {
        alert("TodoView started session Id: " + event.session_id);
    },
    error: function(event) {
        alert("Todo error code: " + event.error_code + " error message: " + event.error_message);
    }
};
Moxtra.todoView(options);

Embed only the Meet layer of the Chat module into your application:

Optional parameters to include in Moxtra.meetView() API request:
Name Value Description
binder_id The binder_id value The binder_id is used for auto inviting all binder members while invite_members is set to "true" if autostart_meet is set to "true".
invite_members "true" or "false" Default is false. Specify to auto invite all binder members from the binder_id when starting a Meet if autostart_meet is set to "true".
produce_feeds "true" or "false" Default is false. Specify to produce meet recording feeds in the binder_id in a Meet recording if autostart_meet is set to "true".
autostart_meet "true" or "false" Default is false. Specify if Meet should be launched or throw a callback to the SDK.
iframe "true" or "false" Default is false. Specify to launch the chatView in iframe or in a new window.
tagid4iframe iFrame ID Specify the ID of iframe container - applicable only if iframe in option is set to "true".
border "true" or "false" Default is true. Specify "false" if using iframe inside a tag without border around the iframe.
scroll "true" or "false" Default is false. Specify "true" if using iframe inside a tag adding scroll bar around the iframe.
iframewidth iFrame Width Width of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 850px. If container controls the width, please set to 100%.
iframeheight iFrame Height Height of the chat iFrame - applicable only if iframe in option is set to "true". Default is set to 500px. If container controls the height, please set to 100%.

Moxtra start meetView callback events handled through a listener
Event Description Attributes
start_meetview Triggered on successful start of meetView. session_id, binder_id
error Triggered in the event of an error. error_code, error_message
request_meet Triggered on requesting start meet without autostart_meet. binder_id
start_meet Triggered on successful start of meet with autostart_meet. session_key, session_id, binder_id
save_meet Triggered when the meet is saved with autostart_meet. session_key, session_id, binder_id
invite_meet Triggered when the invite button is clicked with autostart_meet. session_key, session_id, binder_id
end_meet Triggered when the meet is ended by the host with autostart_meet.
exit_meet Triggered when the attendee leaves the meet with autostart_meet.

Sample code to start meetView in a DIV:

var options = {
    binder_id: BINDER_ID,
    invite_members: true,
    autostart_meet: true,
    iframe: true,
    tagid4iframe: "container",
    start_meetview: function(event) {
        alert("MeetView started session Id: " + event.session_id);
    },
    start_meet: function(event) {
	alert("Meet started session key: " + event.session_key +
                   " session id: " + event.session_id + " binder id: " + event.binder_id);
    },
    end_meet: function(event) {
        alert("Meet end event");
    },
    error: function(event) {
        alert("MeetView error code: " + event.error_code + " error message: " + event.error_message);
    }
};
Moxtra.meetView(options);