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.

sample of code with parameters:

You could need some "placehiolder", which will be shown in iframe position while you edit your site or iframe is loading page.
You can use samples from iFrame Placeholders.
The workspace owner has the option to ADD all new users to his contact list automatically.
The owner simple needs to set his "EMBEDDED User Profile Link" to "default_url" param of widget.
Check instructions here.

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)

Placeholder 1:

Placeholder 2:

Placeholder 3:

Placeholder 4:

STATIC frame

[workspace_id] - should be provided ONLY if it is registered with NINJA support. Keep it EMPTY if you dont have registered "workspace_id", otherwise EMAIL messages will have Default NINJA content and URLS !
frame is placed inside of other page elemnts in position where widget code inserted
default frame heigh: 1000px
default frame width: 100% of container where it is placed
frame dimentions could be changed with params [add_css_code, frame_style]

Code:

<script id="nynwidget_script_exe"> var nynWidgetOptions = { default_url: "", // User Profile Embedded link 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>

FULLSCREEN frame

[workspace_id] - should be provided ONLY if it is registered with NINJA support. Keep it EMPTY if you dont have registered "workspace_id", otherwise EMAIL messages will have Default NINJA content and URLS !
frame covers all page. page scroll is locked while widget frame is opened
widget button is visible and shows notifications
default frame heigh: 100% of page
default frame width: 100% of page
frame dimentions could be changed with [add_css_code, frame_style]

Code:

<script id="nynwidget_script_exe"> var nynWidgetOptions = { default_url: "", // User Profile Embedded link 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>

MODAL frame

[workspace_id] - should be provided ONLY if it is registered with NINJA support. Keep it EMPTY if you dont have registered "workspace_id", otherwise EMAIL messages will have Default NINJA content and URLS !
frame floating above page and scrolls with page content. page scroll is not locked
widget button is visible and shows notifications
widget button by default placed in [parent] element, which should be set in params
position of widget buton could be changed with [widget_style, widget_position]
frame heigh: dynamic. depends on page dimentions. (from 300px to 900px)
frame width: dynamic. depends on page dimentions. (from 300px to 1600px)
frame dimentions could be changed with [add_css_code, frame_style]

Code:

<script id="nynwidget_script_exe"> var nynWidgetOptions = { default_url: "", // User Profile Embedded link 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>

POPUP frame

[workspace_id] - should be provided ONLY if it is registered with NINJA support. Keep it EMPTY if you dont have registered "workspace_id", otherwise EMAIL messages will have Default NINJA content and URLS !
frame is fixed and floating above page. page scroll enabled
widget button is visible and shows notifications
widget button by default placed in [parent] element, which should be set in params
position of widget buton could be changed with [widget_style, widget_position]
rame heigh: dynamic. depends on page dimentions. (from 300px to 900px)
frame width: dynamic. depends on page dimentions. (from 300px to 1600px)
frame dimentions could be changed with [add_css_code, frame_style]

Code:

<script id="nynwidget_script_exe"> var nynWidgetOptions = { start_timeout: 0, default_url: "", // User Profile Embedded link 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>

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 dont have registered "workspace_id"

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.