NINJAworkspace platform developer manual

General Info

NINJA Widget (v1.47) is JavaScript component, used to show "web.nynja.net" web on customers web sites. Customer website we name "Workspace".
"Workspace" could be registered by "web.nynja.net" support. Registered "Workspace" gets unique "Workspace ID", which will be used to identify customer. Registered workspace has additional custom options and benefits (custom email templates, friendly ui/title/branding elements).
All workspaces has same basic functionality.
NINJA Widget source code is located on NINJA web site and called via <script></script> tag.
Component has different parameters, which customer (workspace owner) can define/set by his own needs.

<script id="nynwidget_script_exe"> var nynWidgetOptions = { start_timeout: 0, default_url: "", // User Profile Embedded link workspace_id: "", enterprise_id: "", parent: document.getElementById("nynwidget_script_exe").parentElement, frame_id: "nwd_frame", frame_elm: null, view_mode: "static", to_create_html: true, to_show_widget_button: true, to_show_frame_onstart: true, to_load_nynja_onstart: true, add_css_code: "", frame_style: "", frame_position: "", widget_style: "", widget_position: "right_bottom", to_scroll: true, special_mode: "" }; </script> <script id="nynwidget_script_src" src="https://worker.nynja.net/v1/Content/NynWidget/nynwidget.js" type="text/javascript"></script>




iFrame Placeholders (if needed)

For Temporary placeholder of iframe can be used one of pictures from code below. Just copy image HTML and place it where you need.

Placeholder 0: (animated loader)

<div id='nyn-frame-loader' class='nyn-frame-loader' style='display:flex;justify-content:center;justify-items:center;text-align:center;width:100%;height:100%;margin:0;padding:0;background:#FFF;'> <img src='https://worker.nynja.net/v1/content/img/loading.gif' style='width:auto;height:75%;max-height:200px;min-height:100px;margin:auto;padding:0;' /> </div>

Placeholder 1:

<img src="https://worker.nynja.net/v1/content/img/iframe_placeholder_1.jpg" style="width:100%;height:auto;" />

Placeholder 2:

<img src="https://worker.nynja.net/v1/content/img/iframe_placeholder_2.jpg" style="width:100%;height:auto;" />

Placeholder 3:

<img src="https://worker.NINJA.net/v1/content/img/iframe_placeholder_3.jpg" style="width:100%;height:auto;" />

Placeholder 4:

<img src="https://worker.nynja.net/v1/content/img/iframe_placeholder_4.jpg" style="width:100%;height:auto;" />

STATIC frame

<!-- NINJA widget --> <script id="nynwidget_script_exe"> var nynWidgetOptions = { default_url: "", // User Profile Embedded link workspace_id: "", enterprise_id: "", parent: document.getElementById("nynwidget_script_exe").parentElement, view_mode: "static", frame_id: "nwd_frame", to_create_html: true, to_show_widget_button: true, to_show_frame_onstart: true, to_load_nynja_onstart: true, widget_position: "right_bottom" }; </script> <script id="nynwidget_script_src" src="https://worker.nynja.net/v1/Content/NynWidget/nynwidget.js" type="text/javascript"></script> <!-- / NINJA widget -->

FULLSCREEN frame

<!-- NINJA widget --> <script id="nynwidget_script_exe"> var nynWidgetOptions = { default_url: "", // User Profile Embedded link workspace_id: "", enterprise_id: "", parent: document.getElementById("nynwidget_script_exe").parentElement, view_mode: "fullscreen", frame_id: "nwd_frame", to_create_html: true, to_show_widget_button: true, to_show_frame_onstart: false, to_load_nynja_onstart: true, widget_position: "right_bottom" }; </script> <script id="nynwidget_script_src" src="https://worker.nynja.net/v1/Content/NynWidget/nynwidget.js" type="text/javascript"></script> <!-- / NINJA widget -->

MODAL frame

<!-- NINJA widget --> <script id="nynwidget_script_exe"> var nynWidgetOptions = { default_url: "", // User Profile Embedded link workspace_id: "", enterprise_id: "", parent: document.getElementById("nynwidget_script_exe").parentElement, view_mode: "modal", frame_id: "nwd_frame", to_create_html: true, to_show_widget_button: true, to_show_frame_onstart: false, to_load_nynja_onstart: true, widget_position: "right_bottom" }; </script> <script id="nynwidget_script_src" src="https://worker.nynja.net/v1/Content/NynWidget/nynwidget.js" type="text/javascript"></script> <!-- / NINJA widget -->

POPUP frame

<!-- NINJA widget --> <script id="nynwidget_script_exe"> var nynWidgetOptions = { start_timeout: 0, default_url: "", // User Profile Embedded link workspace_id: "", enterprise_id: "", parent: document.getElementById("nynwidget_script_exe").parentElement, view_mode: "popup", frame_id: "nwd_frame", to_create_html: true, to_show_widget_button: true, to_show_frame_onstart: false, to_load_nynja_onstart: true, widget_position: "right_bottom" }; </script> <script id="nynwidget_script_src" src="https://worker.nynja.net/v1/Content/NynWidget/nynwidget.js" type="text/javascript"></script> <!-- / NINJA widget -->

Widget Parameters:

parameter data type description
start_timeout [ number ] (in msec) Timeout to wait before start code execution. Usefull for generated by hosting web-constructors sites (Wix, ..)
default_url [ string ] (Full URL) Default iframe URL. In case when workspace owner wants to ADD all new users to his contact list he can put here his "EMBEDDED User Profile Link" from ROOT NINJA web site.
Go to ROOT NINJA web. Open profile page https://web.nynja.net/profile and COPY Embedded link from there.
parent [ Html Dom ELement ] Dom element where user wants to add widget and frame elements (!! fullscreen elements will be added to BODY in any case)
workspace_id [ string ] id of "your NINJA workspace"
should be provided ONLY if it is registered with NINJA support, otherwise EMAIL messages will have Default NINJA content and URLS ! Keep it EMPTY if you don't have registered "workspace_id"
enterprise_id [ string ] id for enterprise, should be registered with Ninja support.
This is mandatory for white labelling of app.
frame_id [ string ] id of DOM iframe element in HTML. (Change it in case if you use your OWN iframe element)
frame_elm [ Html Dom Element ] Users iframe element. (used in case when user inserted his iframe in some sepcific place and want to use it)
to_create_html [ boolean ] to generate all HTML elements: widget buttons, iframe, ..
to_show_widget_button [ boolean ] to show widget elements : button,..
to_show_frame_onstart [ boolean ] by default iframe will be showed and web page will be loaded in frame
to_load_nynja_onstart [ boolean ] froom start even if frame not showed web page will be loaded in frame
view_mode [ string ] Defines how frame will be showed
fullscreen frame covers all page. page scroll is locked while widget frame is opened
static frame is inside page elements. page scroll enabled
popup frame is fixed and floating above page. page scroll enabled
modal frame floating above page and scrolls with page
add_css_code [ string ] additional CSS code user can add to page
frame_style [ string ] additional CSS for FRAME (applies to visible/opened frame)
frame_position [ string ] Defines position of frame on the page.
center in the middle of page
center_top horrizontal: center; vertical: top;
center_bottom horrizontal: center; vertical: bottom;
left_top horrizontal: left; vertical: top;
left_middle horrizontal: left; vertical: middle;
left_bottom horrizontal: left; vertical: bottom;
right_top horrizontal: left; vertical: top;
right_middle horrizontal: left; vertical: middle;
right_bottom horrizontal: left; vertical: bottom;
widget_style [ string ] additional user CSS fro widget button wrapper
widget_position [ string ] Defines if widget button will appear above or under frame or in the corner of page
top above the frame
bottom under the frame
right_bottom in the right_bottom page corner
left_bottom in the left_bottom page corner
to_scroll [ boolean ] In some cases frame could be out of current view, so page should scroll to frame pposition
special_mode [ string ] Specialmods of widget work, for some specific cases
wix mode for "Wix"-generated sites.
< home