Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.share

Class s7sdk.share.EmbedShare


Extends s7sdk.common.Button.

The EmbedShare component allows user to create embed code for the application, select, copy it to clipboard and use it for embedding the content into other web page. It represents a button and an associated modal dialog which appears on the screen when user clicks or taps on the button. The dialog contains embed code text, combo box which allows user to choose between different embed sizes and a button to select the code (on desktops only). Embed code template and embed size combobox options are specified using API and modifiers.

The modal dialog is implemented by a separate EmbedDialog component. EmbedShare creates an instance of EmbedDialog and assigns an instance name to it by appending "_dialog" to the EmbedShare instance name. EmbedDialog instance is styled using s7embeddialog CSS class. In order to change styles of the inner dialog instance setCSS() should still be called on EmbedShare instance. EmbedDialog is added to the closest parent s7sdk.common.Container instance in case the application is using s7sdk.common.Container component or to the document BODY. Creating a standalone instance of EmbedDialog component is not currently supported.

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
embedsizeswidth,height[,selected][;width,height[,selected]]A list of embed sizes for size combobox. Set width and height to represent the embed size. Set selected to either 0 or 1 to mean that the item is initially pre-selected--or not--in the combo box.1280,960;640,480;320,240

Defining the Appearance using CSS

The CSS class for styling the EmbedShare is .s7embedshare. This button has the following four states: up, over, down and disabled. You can style these states by adding the state attribute selector to the CSS class. It is recommended that you define common CSS under the main class and only define the necessary distinctions when you use attribute selectors.

CSS ClassAttribute SelectorDescription
.s7embedsharestate=[up|over|down|disabled]Define the appearance of EmbedShare button for each state.
.s7embeddialog(None)Top-level container for the sharing modal dialog.
.s7backoverlay(None)Define the web page shading color and opacity.
.s7dialog(None)Define modal dialog appearance, including border settings and background color. The logic will size and center the dialog automatically according to content, which is the standard behavior on desktops; however if width and height properties are set to 100% the component will always display the dialog in full screen, which is recommended behavior on touch devices.
.s7dialogheader(None)Define the dialog header container.
.s7dialogheadericon(None)Define the dialog icon displayed in the header.
.s7dialogheadertext(None)Define the dialog title displayed in the header.
.s7dialogfooter(None)Define the dialog footer container.
.s7dialogbuttoncontainer(None)Define the container for buttons displayed in the footer.
.s7button(None)Define the common styling for cancel and action buttons in the footer.
.s7dialogcancelbuttonstate=[up|over|down|disabled]Define the appearance of cancel button in the footer for each state.
.s7dialogactionbuttonstate=[up|over|down|disabled]Define the appearance of primary action button in the footer for each state.
.s7dialogviewarea(None)Define the dialog area where the main content is displayed.
.s7dialogbody(None)Define the top-level container for dialog content.
.s7dialoglinefeed(None)Utility class which is used for line separator inside dialog content.
.s7dialogline(None)Define the appearance of the top-level container for single dialog line.
.s7dialoglabel(None)Define the appearance of the common label text.
.s7dialoginputcontainer(None)Define the top-level container for the input control.
.s7dialoginputwide(None)Define the appearance of normal input control.
.s7dialogmessage(None)Define the appearance of the multi-line input control used for embed code.
.s7dialogembedsizepanel(None)Define the top-level container for size selector panel.
.s7dialogembedsizelabel(None)Define the appearance of the size selector label.
.s7comboboxexpanded=[true|false]Define the top element of the combo box control. The expanded attribute selector is set to true when combo box is displaying one of pre-selected sizes; and it is set to false when custom size input controls are visible.
.s7comboboxtext(None)Utility class, used to define the inner height of the single combo box item.
.s7comboboxbuttonstate=[up|over|down|disabled]Define the appearance of the combo box drop-down button for each state.
.s7comboboxdropdown(None)Define the appearance of the combo box drop down panel.
.s7dropdownitem(None)Define the appearance of the single line item inside combo box drop down panel.
.s7dropdownitemanchor(None)Define the appearance of the anchor element inside single line item in combo box drop down panel which captures user action.
.s7checkmark(None)Define the appearance of the check mark icon displayed next to currently selected line item in combo box drop down panel.
.s7dialogcustomsizepanel(None)Define the container for two custom size input controls.
.s7dialogcustomsize(None)Define the container for the single custom size input control.
.s7dialogcustomsizeinput(None)Define the appearance of the single custom size input control.
.s7closebuttonstate=[up|over|down|disabled]Define the appearance of the close button in the top right corner for each state.
.s7dialogscrollpanel(None)Define the top-level container for optional scroll bar.
.s7scrollbar(None)Define the appearance of the main scroll bar element.
.s7scrolltrack(None)Define the appearance of the scroll track.
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.

Localized Symbols

EmbedShare also has text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and Adobe Experience Viewers HTML5 SDK User Guide.

SymbolDescription
EmbedShare.TOOLTIPTooltip for EmbedShare button.
EmbedShare.HEADERDialog header text.
EmbedShare.TOOLTIP_HEADER_CLOSETooltip for the top right close button in modal dialog.
EmbedShare.DESCRIPTIONDescription of embed code text.
EmbedShare.EMBED_SIZELabel for embed size combo box.
EmbedShare.CANCELCaption for "Cancel" button.
EmbedShare.TOOLTIP_CANCELTooltip for "Cancel" button.
EmbedShare.ACTIONCaption for Select All button.
EmbedShare.TOOLTIP_ACTIONTooltip for Select All button.
EmbedShare.CUSTOM_SIZEText for the last "custom size" entry in the embed size combo box.
EmbedShare.CUSTOM_SIZE_WIDTHUse them as aria-label for s7dialogcustomsizeinput input fields("width").
EmbedShare.CUSTOM_SIZE_HEIGHTUse them as aria-label for s7dialogcustomsizeinput input fields("height").

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.share.EmbedShare(containerId, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the EmbedShare component.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setEmbedCode(template)
Sets the template for embed code presented to end user.
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
Methods borrowed from class s7sdk.common.Button:
activate, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setLabel
Class Detail
s7sdk.share.EmbedShare(containerId, settings, compId) 
Example Code

This example demonstrates how to use sharing components in a simple viewer. In this example a ZoomView object,
a SocialShare object, an EmailShare object, a EmbedShare object, a LinkShare object, a TwitterShare
object and a FacebookShare object are created. When a user clicks the SocialShare button, a panel with all sharing components appears.
When a user clicks on individual share component (EmailShare, EmbedShare, LinkShare, TwitterShare or FacebookShare)
corresponding social sharing dialogs popups up. EmailShare, EmbedShare and LinkShare components have their own modal dialogs. 
TwitterShare and FacebookShare trigger sharing dialog from corresponding social service.

The code below does the following:

    

  1. The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
    2. 

  2. CSS Styles are defined in the document head to control the appearance of the SDK components.
    3. 

  3. The s7sdk.Util.init() method is called to initialize the SDK.
    4. 

  4. A ParameterManager object is created to handle component modifiers for the viewer.
    5. 

  5. An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
user interactions, changes in a component's state, etc.).
    6. 

  6. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
    7. 

  7. An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Adobe Experience Viewers HTML5 SDK is loaded and ready.
    8. 

  8. Finally, the init() method is called on the ParameterManager object to start the viewer.
    9. 


<!DOCTYPE html>
<!--
*
* ADOBE SYSTEMS INCORPORATED
*  Copyright 2013 Adobe Systems Incorporated
*  All Rights Reserved.
*
* NOTICE:  Adobe permits you to use, modify, and distribute this file in 
* accordance with the terms of the Adobe license agreement accompanying it. 
* If you have received this file from a source other than Adobe, then your 
* use, modification, or distribution of it requires the prior written 
* permission of Adobe.
-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		
		<meta name="viewport" content="width=device-width" />
		<title>SocialShare Component</title>
		<script language="javascript" type="text/javascript" src="../js/s7sdk/utils/Utils.js"></script>
		<script language="javascript" type="text/javascript">
			s7sdk.Util.lib.include('s7sdk.common.Button');
			s7sdk.Util.lib.include('s7sdk.image.ZoomView');
			s7sdk.Util.lib.include('s7sdk.share.Share');
		</script>
		<style type="text/css">
			.s7zoomview {
				width:400px;
				height:400px;
			}

			.s7zoominbutton, .s7zoomoutbutton, .s7zoomresetbutton, .s7socialshare {
				position:absolute;
				top:410px;
			}

			.s7zoomoutbutton {
				left:30px;
			}

			.s7zoomresetbutton {
				left:60px;
			}

			.s7socialshare {
				left:350px;
			}
		</style>
	</head>
	<body>	
	
		<div id="s7container" style="position:relative;width:500px;height:500px;"></div>
		
		<script language="JavaScript" type="text/javascript">
		
			s7sdk.Util.init();
			
			var myParams = new s7sdk.ParameterManager();	//Parameter Manager	
				
			var zoomComp, zoomResetButton, zoomInButton, zoomOutButton, socialShare, emailShare, linkShare, embedShare, facebookShare, twitterShare;
			function initViewer(){	
				
				myParams.push("serverurl", "https://s7d1.scene7.com/is/image");
				myParams.push("asset", "sample/0");
				zoomComp = new s7sdk.ZoomView("s7container", myParams);	
				zoomResetButton = new s7sdk.ZoomResetButton("s7container", myParams);
				zoomInButton  = new s7sdk.ZoomInButton("s7container", myParams);
				zoomOutButton = new s7sdk.ZoomOutButton("s7container", myParams);
				
				zoomResetButton.addEventListener("click",function(){zoomComp.zoomReset();});
				zoomInButton.addEventListener("click",function(){zoomComp.zoomIn();});
				zoomOutButton.addEventListener("click",function(){zoomComp.zoomOut();});

				socialShare = new s7sdk.share.SocialShare("s7container", myParams, "socialShare");

				emailShare = new s7sdk.share.EmailShare("socialShare", myParams);
				emailShare.setContentTitle("Content title");
				emailShare.setContentUrl("https://www.adobe.com");
				emailShare.setDescription("Content description");
				emailShare.setOriginUrl("https://www.adobe.com/");
				emailShare.setThumbnail("sample/0");

				linkShare = new s7sdk.share.LinkShare("socialShare", myParams);
				linkShare.setContentUrl("https://www.adobe.com");

				embedShare = new s7sdk.share.EmbedShare("socialShare", myParams);
				embedShare.setEmbedCode(
					"<script language=\"javascript\" type=\"text/javascript\"  src=\"https://s7d1.scene7.com/s7viewers/html5/js/BasicZoomViewer.js\"></sc" + "ript>\n" +
					"<div id='basiczoom'></div>\n" +
					"<script type=\"text/javascript\">\n" +
					"var basicZoomViewer = new s7viewers.BasicZoomViewer();\n" +
					"basicZoomViewer.setContainerId(\"basiczoom\");\n" +
					"basicZoomViewer.setAsset(\"sample/0\");\n" +
					"basicZoomViewer.setParam(\"stagesize\",\"$EMBED_WIDTH$,$EMBED_HEIGHT$\");\n" +
					"basicZoomViewer.setParam(\"serverurl\",\"https://s7d1.scene7.com/is/image/\");\n" +
					"basicZoomViewer.init();\n" +
					"</s" + "cript>"
				);

				facebookShare = new s7sdk.share.FacebookShare("socialShare", myParams);

				twitterShare = new s7sdk.share.TwitterShare("socialShare", myParams);
			}			

			myParams.addEventListener(s7sdk.Event.SDK_READY,initViewer,false);
			myParams.init();	//Initialize Parameter Manager	
		</script>
	</body>
</html>

Default styles for EmbedShare:

.s7embedshare {
	width:28px;
	height:28px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7embedshare[state='up'] {
	background-image:url(images/sdk/embedbtn_up.png);
 }
.s7embedshare[state='over'] {
	background-image:url(images/sdk/embedbtn_over.png);
 }
.s7embedshare[state='down'] {
	background-image:url(images/sdk/embedbtn_over.png);
 }
.s7embedshare[state='disabled'] {
	background-image:url(images/sdk/embedbtn_up.png);
 }
.s7tooltip {
	position:absolute;
	padding:5px;
	line-height:100%;
	text-align:center;
	background-color:rgb(224, 224, 224);
	color:rgb(26,26,26);
	font-family:Helvetica, sans-serif;
	font-size:11px;
	z-index:10000;
	border:1px solid rgb(191,191,191);
 }
.s7embeddialog {
	position:absolute;
	font-family:Helvetica;
	z-index:6000;
	user-select:none;
	-ms-user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7embeddialog input::-ms-clear {
	display:none;
 }
.s7embeddialog .s7backoverlay {
	opacity:0.7;
	background-color:#222222;
 }
.s7embeddialog .s7dialog * {
	box-sizing:content-box;
	-moz-box-sizing:content-box;
 }
.s7embeddialog .s7dialog {
	border-radius:8px;
	position:absolute;
	background-color:#dddddd;
 }
.s7embeddialog .s7dialogheader {
	padding:10px;
	position:relative;
 }
.s7embeddialog .s7dialoglabel {
	color:#666666;
	font-weight:bold;
	font-size:9pt;
 }
.s7embeddialog .s7dialogheadericon {
	position:relative;
	vertical-align:middle;
	display:inline-block;
	background-image:url(images/sdk/dlgembed_cap.png);
	width:24px;
	height:14px;
 }
.s7embeddialog .s7dialogheadertext {
	vertical-align:middle;
	padding-left:16px;
	font-size:16pt;
	position:relative;
	font-weight:bold;
 }
.s7embeddialog .s7dialogviewarea {
	background-color:#ffffff;
	margin:10px;
	overflow:hidden;
	position:relative;
	height:300px;
 }
.s7embeddialog .s7dialogbody {
	padding:10px;
	position:relative;
	display:inline-block;
 }
.s7embeddialog .s7dialogfooter {
	border-top:1px solid #909090;
	width:100%;
	position:relative;
 }
.s7embeddialog .s7dialogbuttoncontainer {
	padding-top:10px;
	padding-bottom:6px;
	float:right;
	position:relative;
 }
.s7embeddialog .s7dialogfooter .s7button {
	cursor:default;
	margin-right:10px;
	position:relative;
	display:inline-block;
	color:#ffffff;
	font-size:9pt;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	box-shadow:1px 1px 1px #999999;
	line-height:34px;
 }
.s7embeddialog .s7dialogline {
	position:relative;
	display:inline-block;
 }
.s7embeddialog .s7dialogheader .s7dialogline {
	padding:10px 10px 2px;
 }
.s7embeddialog .s7dialogscrollpanel {
	vertical-align:top;
	width:44px;
	height:100%;
	display:inline-block;
 }
.s7embeddialog .s7dialoglinefeed {
	display:block;
 }
.s7embeddialog .s7closebutton {
	position:absolute;
	top:2px;
	right:2px;
	padding:8px;
	width:20px;
	height:20px;
 }
.s7embeddialog .s7closebutton[state='up'] {
	background-image:url(images/sdk/close_up.png);
 }
.s7embeddialog .s7closebutton[state='over'] {
	background-image:url(images/sdk/close_over.png);
 }
.s7embeddialog .s7closebutton[state='down'] {
	background-image:url(images/sdk/close_down.png);
 }
.s7embeddialog .s7closebutton[state='disabled'] {
	background-image:url(images/sdk/close_disabled.png);
 }
.s7embeddialog .s7comboboxdropdown {
	border-top:1px solid #cccccc;
	width:100%;
	display:block;
	font-size:10pt;
	border:1px solid #cccccc;
 }
.s7embeddialog .s7dropdownitem {
	display:block;
	width:100%;
	position:relative;
 }
.s7embeddialog .s7checkmark {
	width:25px;
	height:25px;
	vertical-align:middle;
	display:inline-block;
	background-image:url(images/sdk/cboxchecked.png);
 }
.s7embeddialog .s7dropdownitemanchor {
	display:block;
	width:100%;
	background-color:#ffffff;
	position:relative;
 }
.s7embeddialog .s7dropdownitemanchor:hover {
	background-color:#eeeeee;
 }
.s7embeddialog .s7scrollbar {
	background-color:transparent;
	position:absolute;
	top:8px;
	bottom:8px;
	right:8px;
	width:28px;
 }
.s7embeddialog .s7scrollbar .s7scrolltrack {
	background-color:rgb(178, 178, 178);
 }
.s7embeddialog .s7dialoginputwide {
	border:none;
	padding-bottom:10px;
	width:430px;
 }
.s7embeddialog .s7dialoginputcontainer {
	padding:10px;
	width:430px;
	font-size:10pt;
	word-wrap:break-word;
	border:1px solid #cccccc;
 }
.s7embeddialog .s7dialogmessage {
	-moz-user-select:text;
	-khtml-user-select:text;
	-webkit-user-select:text;
	-o-user-select:text;
	white-space:-o-pre-wrap;
	word-wrap:break-word;
	user-select:text;
	border:none;
	resize:none;
	height:50px;
 }
.s7embeddialog .s7dialogembedsizepanel {
	font-size:10pt;
	padding:10px;
	border:none;
 }
.s7embeddialog .s7dialogembedsizelabel {
	vertical-align:top;
	display:inline-block;
	width:80px;
 }
.s7embeddialog .s7dialogcustomsizepanel {
	position:relative;
	display:inline-block;
	left:20px;
	vertical-align:top;
 }
.s7embeddialog .s7comboboxtext {
	position:relative;
	display:inline-block;
	height:40px;
 }
.s7embeddialog .s7dialogcustomsize {
	position:relative;
	display:inline-block;
	border:1px solid #cccccc;
	padding-left:2px;
	padding-right:2px;
	margin-right:20px;
	width:70px;
 }
.s7embeddialog .s7dialogcustomsizeinput {
	border:none;
	display:inline-block;
	vertical-align:middle;
	width:100%;
 }
.s7embeddialog .s7dialogcancelbutton {
	width:64px;
	height:34px;
 }
.s7embeddialog .s7dialogcancelbutton[state='up'] {
	background-color:#666666;
	color:#e4e4e4;
 }
.s7embeddialog .s7dialogcancelbutton[state='down'] {
	background-color:#555555;
	color:#ffffff;
 }
.s7embeddialog .s7dialogcancelbutton[state='over'] {
	background-color:#555555;
	color:#ffffff;
 }
.s7embeddialog .s7dialogcancelbutton[state='disabled'] {
	background-color:#b2b2b2;
	color:#e4e4e4;
 }
.s7embeddialog .s7dialogactionbutton {
	width:82px;
	height:34px;
 }
.s7embeddialog .s7dialogactionbutton[state='up'] {
	background-color:#333333;
	color:#dddddd;
 }
.s7embeddialog .s7dialogactionbutton[state='down'] {
	background-color:#222222;
	color:#cccccc;
 }
.s7embeddialog .s7dialogactionbutton[state='over'] {
	background-color:#222222;
	color:#cccccc;
 }
.s7embeddialog .s7dialogactionbutton[state='disabled'] {
	background-color:#b2b2b2;
	color:#dddddd;
 }
.s7embeddialog .s7combobox .s7comboboxbutton {
	width:40px;
	height:40px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	position:absolute;
	display:block;
	top:0px;
	right:0px;
 }
.s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
	background-image:url(images/sdk/cboxbtndn_up.png);
 }
.s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
	background-image:url(images/sdk/cboxbtndn_over.png);
 }
.s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
	background-image:url(images/sdk/cboxbtndn_over.png);
 }
.s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
	background-image:url(images/sdk/cboxbtndn_up.png);
 }
.s7embeddialog .s7combobox {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	border:1px solid #cccccc;
	display:block;
	padding-left:10px;
	position:relative;
	width:300px;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7embeddialog .s7combobox[expanded='false'] {
	width:110px;
 }
.s7embeddialog .s7combobox[expanded='true'] {
	width:300px;
 }
.s7embeddialog .s7combobox .s7comboboxtext {
	position:relative;
	display:inline-block;
	height:40px;
 }
.s7embeddialog .s7combobox .s7comboboxdropdown {
	border-top:1px solid #cccccc;
	width:100%;
	display:block;
 }
.s7embeddialog .s7combobox .s7dropdownitem {
	display:block;
	width:100%;
	position:relative;
 }
.s7embeddialog .s7combobox .s7checkmark {
	width:25px;
	height:25px;
	vertical-align:middle;
	display:inline-block;
	background-image:url(images/sdk/cboxchecked.png);
 }
.s7embeddialog .s7combobox .s7dropdownitemanchor {
	display:block;
	width:100%;
	background-color:#ffffff;
	position:relative;
 }
.s7embeddialog .s7combobox .s7dropdownitemanchor:hover {
	background-color:#eeeeee;
 }
Parameters:
{String} containerId
The ID of the parent DOM element to which the component is added as a child; if an ID of the SocialShare component is used, this component will be added to SocialShare panel.
{s7sdk.ParameterManager} settings
A parameter manager instance that represents the desired configuration.
{String} compId
An optional parameter that specifies the ID of the component DOM element.
See:
s7sdk.share.SocialShare
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the EmbedShare component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.SocialEvent.

The events supported by the component are:

  • SocialEvent.NOTF_SOCIAL_ACTIVATED - Dispatched when sharing components are activated by the user. s7sdk.event.SocialEvent
  • SocialEvent.NOTF_SOCIAL_DEACTIVATED - Dispatched when sharing components are deactivated by the user. s7sdk.event.SocialEvent
    • Parameters:
    {String} type
    Event name, for example SocialEvent.NOTF_SOCIAL_ACTIVATED.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.
    See:
    s7sdk.event.SocialEvent
    setCSS(classname, property, value)
    Sets a particular CSS class and property on a component
    Parameters:
    {String} classname
    The CSS classname to use for this style. i.e. .s7emailshare
    {String} property
    The CSS property that is being set. i.e. background-color
    {String} value
    The CSS property value being set. i.e. #FF0000
    setEmbedCode(template)
    Sets the template for embed code presented to end user. The template should be ready-to-use embed code for the application, which can be copied/pasted to the external web page. The only exception is two optional replacement tokens: $EMBED_WIDTH$ and $EMBED_HEIGHT$. The component will replace these tokens with actual values selected by user in embed size combobox.
    Parameters:
    {String} template
    embed code template
    setModifier(modObj)
    Sets 1-N # of modifiers for the component.
    Parameters:
    {Object} modObj
    A simple JSON object with name:value pairs of valid modifiers for a particular component
    Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:09 GMT-0000 (UTC)