Moxtra Timeline Widget for Web

Embed the Moxtra Timeline into your web application using the simple JavaScript calls mentioned in this document.

Timeline (Full View)

Optional parameters to include in Moxtra.timeline() API request
Name Value Description
binder_id Binder ID Specify a binder ID if the timeline should automatically point to the specified binder ID.
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 timeline 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 timeline 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%.
autostart_meet "true" or "false" Default is false. Specify if Meet should be launched or throw a callback to the SDK.
invite_members "true" or "false" Default is false. Specify if autostart_meet is set to "true" to auto invite all current binder members when starting a Meet.
produce_feeds "true" or "false" Default is false. Specify if autostart_meet is set to "true" to produce meet recording feeds in the current binder in a Meet recording when starting a Meet.
autostart_note "true" or "false" Default is false. Specify if Note should be launched or throw a callback to the SDK.
chat_id Chat ID (= Comment ID + 1) 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.
tags_include included filtering tags List of binder including tags separated by "," for OR operation; for example, "Research,Show"
tags_exclude excluded filtering tags List of binder excluding tags separated by "," for OR operation; for example, "Data,Show" If the same tag is used in tags_exclude and tags_include, tags_exclude takes priority.
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 } 
}

Join meet should be launched or throw a callback to the SDK. Default is true.

{ 
   "auto_join_meet": true/false
}

To show or hide the global search icon. Default is true.

{ 
   "show_global_search": 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 show or hide the Binder Options. Default is true.

{ 
   "show_binder_options": 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
}

Moxtra start timeline callback events handled through a listener
Event Description Attributes
start_timeline Triggered on successful start of timeline. session_id, binder_id
error Triggered in the event of an error. error_code, error_message
view_binder Triggered on user switching to a different binder. session_id, binder_id
create_binder Triggered on user creating a new binder. session_id, binder_id
delete_binder Triggered on user deleting a binder. session_id, binder_id
leave_binder Triggered on user left a binder. session_id, binder_id
remove_binder_user Triggered on user getting removed from a binder. session_id, binder_id
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
request_join_meet Triggered on user join meet while auto_join_meet has been turned off via extension. 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.
request_note Triggered on requesting start note without autostart_note. session_id, binder_id, page_index
start_note Triggered on successful start of note with autostart_note. session_key, session_id
save_note Triggered when user close and save the note with autostart_note. destination_binder_id, share_url, download_url
cancel_note Triggered when user close and not save the note with autostart_note.
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
update_unread_feeds Triggered on binder switches. session_id, total_unread_feeds
request_create_binder Triggered on clicking New binder button. session_id
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 timeline:

var options = {
    binder_id: binderid.value,
    iframe: true,
    tagid4iframe: "container",
    iframewidth: "920px",
    iframeheight: "650px",
    autostart_meet: true,
    autostart_note: true,
    extension: { "show_dialogs": { "meet_invite": true } },
    start_timeline: function(event) {
        alert("Timeline started session Id: " + event.session_id + " binder id: " + event.binder_id);
    },
    view_binder: function(event) {
        alert("Binder switched session Id: " + event.session_id + " binder id: " + event.binder_id);
    },
    invite_member: function(event) {
        alert("Invite member into binder Id: " + event.binder_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");
    },
    save_meet: function(event) {
        alert("Meet saved on binder: " + event.binder_id);
    },
    start_note: function(event) {
        alert("session key: " + event.session_key + " session id: " + event.session_id);
    },
    save_note: function(event) {
        alert("Note saved on binder: " + event.destination_binder_id);
    },
    cancel_note: function(event) {
        alert("Note cancelled");
    },
    error: function(event) {
        alert("Timeline error code: " + event.error_code + " error message: " + event.error_message);
    }
};
Moxtra.timeline(options);

Chat List

Embed only the Conversation list from the timeline view inside your web application:

Optional parameters to include in Moxtra.timelineView() API request:
Name Value Description
binder_id Binder ID Specify a binder ID if the timelineView should automatically point to the specified binder ID.
iframe "true" or "false" Default is false. Specify to launch the timelineView 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 timeline iFrame - applicable only if iframe in option is set to "true". Default is set to 330px. If container controls the width, please set to 100%.
iframeheight iFrame Height Height of the timeline 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%.
tags_include included filtering tags List of binder including tags separated by "," for OR operation; for example, "Research,Show"
tags_exclude excluded filtering tags List of binder excluding tags separated by "," for OR operation; for example, "Data,Show" If the same tag is used in tags_exclude and tags_include, tags_exclude takes priority.

Moxtra timelineView callback events handled through a listener
Event Description Attributes
start_timeline Triggered on successful start of timelineView. session_id
error Triggered in the event of an error. error_code, error_message
request_view_binder Triggered on user select a new binder. session_id, binder_id
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

Sample code to start timelineView in a DIV:

var options = {
    iframe: true,
    tagid4iframe: "container",
    iframewidth: "350px",
    iframeheight: "650px",
    start_timeline: function(event) {
        alert("TimelineView started session Id: " + event.session_id);
    },
    request_view_binder: function(event) {
        alert("Request to view binder Id " + event.binder_id);
    },
    error: function(event) {
        alert("TimelineView error code: " + event.error_code + " error message: " + event.error_message);
    }
};

Moxtra.timelineView(options);