866-289-7071 support@yonyx.com
Select Page

Javascript API Reference

Everything you need to build on top of Yonyx.

Introduction

Yonyx Javascript API enables communication between “Embedded Yonyx” and your “Container website”.
If you have any problems or requests please contact us.

What is Embedded Yonyx Website?

Embedded Yonyx is any Yonyx page like Yonyx Guide or Yonyx Landing Page that is embedded into your Container Website.

What is Container website?

Container website is your website that embeds Yonyx.

How to enable Javascript API?

Yonyx Javascript API is enabled per Line of Business.
Please send us a request at support@yonyx.com with the following details:
1. Line of Business name you want it enabled for.
2. You Container website URL where you plan to embed Yonyx.

Supported Messages

Messages supported by this API.

========================================
Messages published by Embedded Yonyx
========================================
lob-loaded
guidance-step-loaded
user-response-selected
traversal-completed
traversal-reference-id-submitted
dimension
result-set-form-values
result-set-incident-placeholder-values

========================================
Messages published by Container Website
====================================
enable-user-responses
disable-user-responses
select-user-response
get-dimension
go-back
invoke-feedback
invoke-compliment
complete-traversal
replace-placeholders
return-command-result
set-incident-placeholder-values
set-form-values

Guidance Step Loaded

This message is published to the Container Website when a guidance step is loaded by an embedded Yonyx Guide.

Structure of the message:
{
	messageName              : 'guidance-step-loaded',
	id                       : '222f46b0-9d59-11e2-bfd4-40406ab12aa1',
	transcriptId             : '72a3d100-b5a4-11e4-9ecf-0eeb802c7794',
	title                    : 'Place Order',
	body                     : '
T-Shirt size you chose: Small.  T-Shirt color you chose: Blue. Please fill out this form.
',
	question                 : 'Are you ready to proceed?',
	notes                    : '',
	commandInternalName      : 'place-order',
	commandParameters        : [
		{
			name  : 'user-type',
			value : 'Registered'
		},
		{
			name  : 'channel',
			value : 'Website'
		}
	],
	currentGuidanceFamilyUrl : 'https://your-subdomain.yonyx.com/y/conversation/?id=4133cb50-9d62-11e2-bfd4-40406ab12aa1&did=f9e71980-3de7-11e5-9862-0800271a7174',
	responses                : [
		{
			id                    : '3133cb50-9d62-11e2-bfd4-40406ab12aa1',
			body                  : 'Yes, place oder.',
			nextGuidanceFamily    : '3133cb50-9d62-11e2-bfd4-40406ab12aa2',
			nextGuidanceFamilyUrl : 'https://your-subdomain.yonyx.com/y/conversation/?id=3133cb50-9d62-11e2-bfd4-40406ab12aa1&did=f9e71980-3de7-11e5-9862-0800271a7174'
		},
		{
			id                    : '2bd80770-9d62-11e2-acbc-404089ef33c3',
			body                  : 'No, skip order placement.',
			nextGuidanceFamily    : '2bd80770-9d62-11e2-acbc-404089ef33c4',
			nextGuidanceFamilyUrl : 'https://your-subdomain.yonyx.com/y/conversation/?id=2bd80770-9d62-11e2-acbc-404089ef33c3&did=f9e71980-3de7-11e5-9862-0800271a7174'
		}
	],
	placeholders             : [ 't-shirt-size', 't-shirt-color' ],
	placeholderValues        : [
		{
			name  : 't-shirt-size',
			value : 'Small'
		},
		{
			name  : 't-shirt-color',
			value : 'Blue'
		}
	],
	autoTraverse             : false,
	form                     : [
		{
			name  : 'buyer-name',
			type  : 'String',
			value : ''
		},
		{
			name  : 'item-name',
			type  : 'String',
			value : ''
		},
		{
			name  : 'quantity',
			type  : 'String',
			value : ''
		}
	],
	commandType              : 'yonyx-command'
}

Select User Response

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it selects the specific User Response and traverses further.

{
Structure of the message:
{
	messageName : 'select-user-response',
	id          : '3133cb50-9d62-11e2-bfd4-40406ab12aa1'
}

User Response Selected

This message is published to the Container Website when an end user clicks on a specific “User Response” of a Guidance Step.

Structure of the message:
{
	messageName : 'user-response-selected',
	id          : '3133cb50-9d62-11e2-bfd4-40406ab12aa1',
	body        : ' No it is not.'
}

Disable User Responses

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it prevents traversal by making the User Responses non clickable.

Structure of the message:
{
	messageName : 'disable-user-responses'
}

Enable User Responses

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it allows traversal by making the User Responses clickable.

Structure of the message:
{
	messageName : 'enable-user-responses'
}

Traversal Completed

This message is published to the Container Website when an end user clicks on the “Done” link of a Guidance Step to wrap up the traversal.

Structure of the message:
{
	messageName  : 'traversal-completed',
	transcriptId : '72a3d100-b5a4-11e4-9ecf-0eeb802c7794',
	transcript   :
		"http://testisp.yonyx.com:8888/incident/?did=72a3d100-b5a4-11e4-9ecf-0eeb802c7794\n\n============================================\nTRANSCRIPT SUMMARY: \nT = Title, Q = Question, U = User Response\n============================================\nT: [00:00:31] My TV Doesn't work\nQ: Is your TV plugged into the wall socket?\n--------------------------------------------\nU: No it is not.\n--------------------------------------------\nT: [00:00:51] Plug it in\nQ: Do you now see the red light come on?\n--------------------------------------------\nU: Yes, it did.\n--------------------------------------------\nT: [00:00:30] Use Remote Control to Turn TV On\nQ: Did the TV turn on?\n--------------------------------------------\n\n "
}

Traversal Reference Id Submitted

This message is published to the Container Website when an end user clicks on the “Submit” button in the “Done” window after populating Reference Id field.

Structure of the message:
{
	messageName  : 'traversal-reference-id-submitted',
	transcriptId : '72a3d100-b5a4-11e4-9ecf-0eeb802c7794',
	referenceId  : 'xxxxxxxx',
	transcript   :
		"http://testisp.yonyx.com:8888/incident/?did=72a3d100-b5a4-11e4-9ecf-0eeb802c7794\n\n============================================\nTRANSCRIPT SUMMARY: \nT = Title, Q = Question, U = User Response\n============================================\nT: [00:00:31] My TV Doesn't work\nQ: Is your TV plugged into the wall socket?\n--------------------------------------------\nU: No it is not.\n--------------------------------------------\nT: [00:00:51] Plug it in\nQ: Do you now see the red light come on?\n--------------------------------------------\nU: Yes, it did.\n--------------------------------------------\nT: [00:00:30] Use Remote Control to Turn TV On\nQ: Did the TV turn on?\n--------------------------------------------\n\n "
}

Dimension

This message is published to the Container Website whenever the dimension of Embedded Yonyx Guide changes.

Structure of the message:
{
	messageName : 'dimension',
	width       : 568,
	height      : 309
}

Get Dimension

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it publishes ‘dimension’ message back to the Container Website.

Structure of the message:
{
	messageName : 'get-dimension'
}

Invoke Feedback

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it opens Feedback window.

Structure of the message:
{
	messageName : 'invoke-feedback'
}

Invoke Compliment

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it opens Compliment window.

Structure of the message:
{
	messageName : 'invoke-compliment'
}

Complete Traversal

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it opens Done window.

Structure of the message:
{
	messageName : 'complete-traversal'
}

Replace Placeholders

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it replaces all placeholders in the body with the replacement values carried by this message.

Structure of the message:
{
	messageName                : 'replace-placeholders',
	placeholdersReplacementMap : {
		'placeholder-1' : 'replacement-value-1',
		'placeholder-2' : 'replacement-value-2',
		'placeholder-3' : 'replacement-value-3'
	}
}

Go Back

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it traverses back to the previous Guidance Step.

Structure of the message:
{
	messageName : 'go-back'
}

Set Incident Placeholder Values

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it updates the current incident with provided Placeholder values. Listen to “Result Set Incident Placeholder Values” to handle its result (success/failure). 

Structure of the message:
{
	messageName       : 'set-incident-placeholder-values',
	placeholderValues : [
		{
			name  : 'some name',
			value : 'some value'
		},
		{
			name  : 'some name',
			value : 'some value'
		}
	]
}

Result of Set Incident Placeholder Values

This message is published to the Container Website. When Embedded Yonyx Guidance receives “Set Incident Placeholder Values” message, it processes that request and return the result either success or failure and error message in this message.

Structure of the message:
{
	messageName : 'result-set-incident-placeholder-values',
	success     : false,
	message     : 'Placeholder names can only contain alphabets, numerals and hyphen.'
}

Set Form Values

This message is published by the Container Website to Embedded Yonyx Guide. When Embedded Yonyx Guidance Step receives this message, it does the following:
1. Validates the form values.
2. Submits the form.
3. Updates the current incident with provided Form values as Placeholder values.
4. Returns the result in “Result of Set Form Values” message. 

Structure of the message:
{
	messageName : 'set-form-values',
	formValues  : [
		{
			name  : 'buyer-name',
			type  : 'String',
			value : 'John Doe'
		},
		{
			name  : 'item-name',
			type  : 'String',
			value : 'T-Shirt'
		},
		{
			name  : 'quantity',
			type  : 'String',
			value : '3'
		}
	]
}

Result of Set Form Values

This message is published to the Container Website. When Embedded Yonyx Guidance Step receives “Set Form Values” message, it processes that request and returns either success or failure along with error message and validated form values.

Structure of the message:
{
	messageName : 'result-set-form-values',
	success     : true,
	message     : 'Submit form values succeeded.',
	formValues  : [
		{
			name  : 'buyer-name',
			type  : 'String',
			value : 'John Doe'
		},
		{
			name  : 'item-name',
			type  : 'String',
			value : 'T-Shirt'
		},
		{
			name  : 'quantity',
			type  : 'String',
			value : '3'
		}
	]
}

Live Demo

 

Simple Embed (Open Demo) Embed with Custom UI (Open Demo)
User Interface This type of container app simply embeds Yonyx and leverages Yonyx’s native UI completely. This type of container app, in addition to embedding Yonyx, also controls the UI elements that display Title, Body and Follow on question.
Yonyx Commands

Once the container app has been programmed to handle Yonyx commands differently than Custom commands, introducing additional data-capture commands does not need developer involvement.

Form validation and submission are all handled by Yonyx natively.

Once the container app has been programmed to handle Yonyx commands differently than Custom commands, introducing additional data-capture commands does not need developer involvement unless form UI customizations are needed.

Form validation and submission need to be handled by the container app by calling “Set Form Values” and listening to “Result of Set Form Value”.
Custom Commands Developer involvement is needed for command implementations that perform actions other are custom to your organization. Developer involvement is needed for command implementations that perform actions that are custom to your organization.

This page demonstrates a Container Website hosted at “rackcdn.com” communicating with Yonyx Guide hosted at testisp.yonyx.com.

This demo can be used to understand the following:

  1. Use Commands to invoke functions that in turn call external 3rd party APIs to GET or POST data. This demo uses 3 Commands:
    • demo-display-email-registration-form: This is a data-capture command (command that contains a form).  It presents an Email Registration Form and on submit saves the information to the current Incident as Placeholder Values.
    • demo-display-country-list: This is a data-capture command.  It presents a list of Countries in a dropdown and on submit saves the information to the current Incident as Placeholder Values.
    • demo-display-public-ip: This is a generic command.  It retrieves the user’s public IP using a 3rd party API.
  2. Use Placeholder to present data to the user within a Guidance step.
    • demo-email-form-values: To display Email Registration Form information provided by the user within a separate Guidance step.
    • demo-country-name: To display Country chosen by the user within a separate Guidance step.
    • demo-public-ip: To display the user’s Public IP within a separate Guidance step.

Step-by-step Walkthrough

Let’s walk you through the process of setting this up step by step.

Step 1: Create an html file.

Let’s review this html file:

  1. The head section includes a script file called “container-app.js”. We will review this script in Step 2. 
    <script src="container-app.js"></script>
  2. The body is made up of multiple sections. formHeader is used to construct the header of the app with a logo. 
          <!-- 
      =================================================================================
          THIS SECTION RENDERS HEADER 
          USE YOUR OWN URL FOR LOGO HERE
      =================================================================================    
      -->  	
      <div id="formHeader" class="row " style="margin:5px;"><!-- row - formHeader  -->
      ...
      </div> <!-- row - formHeader  -->
  3. formLoading is used to construct wait screen. 
          <!-- 
      =================================================================================
          THIS SECTION RENDERS WAIT SCREEN 
          USE YOUR OWN URL FOR SPINNING WHEEL HERE
      =================================================================================    
      -->   
      <div id="formLoading" class="row " style="margin:5px; display:none;"><!-- row - formLoading  -->
      ...
      </div> <!-- row - formLoading  -->
  4. yonyxEmbed is used to construct Yonyx iframe embed. 
          <!-- 
      =================================================================================
          THIS SECTION RENDERS EMBEDS YONYX LANDING PAGE IN AN IFRAME 
      =================================================================================    
      -->   			
      <div id="yonyxEmbed" class="row " style="margin:5px;"><!-- row - yonyxEmbed  -->
      ...
  	   <iframe id="yonyxAppFrame" frameborder="0" src="" width="100%" height="300px" style="border:none;" allowfullscreen="allowfullscreen" ></iframe>
      ...
      </div> <!-- row - yonyxEmbed  -->
  5. formGuidanceStep is used to display each Guidance step’s Title, Body, Question and User responses. 
          <!-- 
      =================================================================================
          THIS SECTION RENDERS THE HTML MARKUP OF EACH GUIDANCE STEP
          GUIDANCE STEP TITLE GOES INTO formGuidanceStepTitle
          GUIDANCE STEP BODY GOES INTO formGuidanceStepBody
          GUIDANCE STEP FOLLOW-ON QUESTION GOES INTO formGuidanceStepQuestion
          GUIDANCE STEP USER RESPONSES GO INTO formGuidanceStepResponses
      =================================================================================    
      -->         
      <div id="formGuidanceStep" class="row " style="display:none; margin:5px;">
      ...
      </div> <!-- row - formGuidanceStep  -->
  6. formEmailRegistration is used display an Email Registration form for the user to enter information and submit. 
          <!-- 
      =================================================================================
          THIS SECTION IS AN EXAMPLE OF HOW YOU WOULD DISPLAY A FORM SIMILAR TO 
          EMAIL REGISTRATION FORM TO THE USER AND SUBMIT THE INPUTS TO 3RD PARTY API
      =================================================================================    
      -->  
      <div id="formEmailRegistration" class="row " style="display:none; margin:5px;">
      ...
      </div> <!-- row - formEmailRegistration  -->
  7. formChooseCountry is used to display a list of Counties for the user to choose. 
          <!-- 
      =================================================================================
          THIS SECTION IS AN EXAMPLE OF HOW YOU WOULD DISPLAY A LIST COUNTIES RETRIEVED 
          FROM AN API AND TRAVERSAL THE GUIDE WILL DEPEND ON:
          1. COUNTRY CHOSEN BY THE USER
          2. AUTO TRAVERSE CONDITION CREATED BY THE GUIDE AUTHOR
      =================================================================================    
      -->  
      <div id="formChooseCountry" class="row " style="display:none; margin:5px;">
      ...
      </div> <!-- row - formChooseCountry  -->
  8. formPublicIP is used to display the user’s public IP. 
          <!-- 
      =================================================================================
          THIS SECTION IS AN EXAMPLE OF HOW YOU WOULD DISPLAY USER'S PUBLIC IP RECEIVED
          FROM AN API AND TRAVERSAL OF THE GUIDE WILL DEPEND ON:
          1. SUCCESS: IF THE API SUCCEEDS
          2. FAILURE: IF THE API FAILS
      =================================================================================    
      -->  
      <div id="formPublicIP" class="row " style="display:none; margin:5px;">
      ...
      </div> <!-- row - formPublicIP  -->
  9. formWrapup is used to present the user with a summary of all choice made along with the transcript of the path that the user traversed through this Gudie. 
          <!-- 
      =================================================================================
          THIS SECTION RENDERS A FINAL WRAPUP SCREEN WHERE YOU DISPLAY:
          1. SUMMARY OF VALUES INPUT BY THE USER
          2. SUMMARY OF THE PATH TRAVERSED BY THE USER THROUGH THE GUIDE
      =================================================================================    
      -->  
      <div id="formWrapup" class="row " style="display:none; margin:5px;">
      ...
      </div> <!-- row - formWrapup  -->

Step 2: Create a javascript file.

Let’s review this javascript file:

  1. This file is made up of multiple sections. To begin, we have the declarations. 
          var stepId = null;
      var transcriptId = null;
      var transcript = null;
      var currentGuidanceFamilyUrl = null;
      var previousSteps = [];
      var transcriptIds = [];
      var transcriptUrls = "";
      var landingPageUrlFrag = "/y/portal/"; 
      var browseUrlFrag = "&at=browse";
      var searchUrlFrag = "&at=search";


      var constOriginUpstream = window.location.protocol + "//" + window.location.hostname ; 
      /*
      =================================================================================
       Replace this with your Yonyx subdomain
      =================================================================================
      */
      var constOriginDownstream = "https://testisp.yonyx.com";
      /*
      =================================================================================
       Replace this with your Yonyx LOB ID
      =================================================================================
      */      
      var lobId = "847eb630-047c-11e4-9638-bc764e10f0e8";
      /*
      =================================================================================
        Temporary data storage - used later for Placeholder replacements
      ================================================================================= 
      */
      var countryCode, countryName, publicIP, name, email, userMessage;
      var sessionPlaceholdersMap = {};
      sessionPlaceholdersMap[ "demo-email-form-values" ] = "";
      sessionPlaceholdersMap[ "demo-public-ip" ] = "";
      sessionPlaceholdersMap[ "demo-country-name" ] = "";
  2. Senders: These are functions that send messages from Container app to Yonyx embed (downstream) or Host web page where the container app itself may be embedded. 
          /*  
      =================================================================================
        Broadcasts messages upstream to the  web page that embeds this container app
        
        Only useful in situations where this container app is embedded:
        
                Someother web page  -- [Upstream]
                              ^
                              |
                              v
                    Embedded container app
                              ^
                              |
                              v
                  Embedded Yonyx [Downstream]

      =================================================================================
      */
      function senderUpstream(data) {
        ...
      } 

      /*  
      =================================================================================
        Broadcasts messages downstream to Yonyx
      =================================================================================
      */
      function senderDownstream(data) {
        ...
      }
  3. Listener: This function listens to incoming messages from Yonyx embed. 
          /*
      =================================================================================
        Listens to incoming messages from Yonyx
        Supported Yonyx Javascript API methods : https://corp.yonyx.com/ui-api-v1/
          guidance-step-loaded
          select-user-response
          user-response-selected
          disable-user-responses
          enable-user-responses
          traversal-completed
          traversal-reference-id-submitted
          dimension
          invoke-feedback
          invoke-compliment
          complete-traversal
          replace-placeholders
          return-command-result
          get-dimension
          go-back
      =================================================================================
      */
      function listener (event) {
        ...

        /*
        =================================================================================
          Process incoming messages
        =================================================================================
        */
        if(data.messageName === "lob-loaded") {
          /*
          =================================================================================
            Occurs when a Yonyx landing page is loaded
          =================================================================================
          */
          ...
        }
        else if(data.messageName === "guidance-step-loaded") {
          /*
          =================================================================================
            Occurs when a Yonyx Guidance step is loaded
          =================================================================================
          */
          ...

          /*
          =================================================================================
            Process placeholders
          =================================================================================
          */
          ...

          /*
          =================================================================================
            Process commands
          =================================================================================
          */
          ...
        }
        else if(data.messageName === "traversal-completed") {
          /*
          =================================================================================
            Occurs when an internal user clicks on "Done" button after the Guide traversal
            is completed
          =================================================================================
          */
          ...

        }
        else if(data.messageName === "dimension") {
          /*
          =================================================================================
            When Yonyx landing page, guidance step, etc are loaded this message is 
            broadcasted by Yonyx with its dimension info
            This info can be used by the container app to adjust the height of the 
            embedded iframe
          =================================================================================
          */

          ...          
        }
      }
  4. Browser Event Listener: This section wires the listener function with browser event listener. 
          /*
      =================================================================================
        Register "listener" function as the browser event listener
      =================================================================================
      */

      if (window.addEventListener) {
        // For standards-compliant web browsers
        window.addEventListener("message", listener, false);
      }
      else {
        window.attachEvent("onmessage", listener);
      }
  5. Javascript API methods: These functions are used to communicate with Yonyx embed. 
          /*
      =================================================================================
        Use this method to instruct Yonyx to enable User responses (make them clickable)
      =================================================================================
      */
      function enableUserResponses() {
        ...
      }
      /*
      =================================================================================
        Use this method to instruct Yonyx to disable User responses (make them nonclickable)
      =================================================================================
      */
      function disableUserResponses() {
        ...
      }
      /*
      =================================================================================
        Use this method to instruct embedded Yonyx iframe to go back one step
      =================================================================================
      */
      function goBack( ) {
        ...
      }

      /*
      =================================================================================
        Use this method to instruct Yonyx to choose the User response with this id
      =================================================================================
      */
      function selectUserResponse(userResponseId) {
        ...
      }
      /*
      =================================================================================
        Use this method to instruct Yonyx to replace placeholder tokens with their 
        corresponding values
      =================================================================================
      */
      function replacePlaceHolders(placeholdersReplacementMap) {
        ...
      }
      /*
      =================================================================================
        Use this method to instruct Yonyx to click "Done"
      =================================================================================
      */
      function completeTraversal() {
        ...
      }

      /*
      =================================================================================
        Use this method to return a command's return value to Yonyx
        Based on this return the Guide may automatically traverse forward in a direction
        programmed by the author through auto-traverse conditions
      =================================================================================
      */
      function returnCommandResult( commandReturnValue ) {
        ...
      }
      

      /*
      =================================================================================
        Use this method to instruct Yonyx to broadcase its current page's dimension 
        on demand
      =================================================================================
      */
      function getDimension( ) {
        ...
      }
      /*
      =================================================================================
        Use this method to instruct the upstream web page to adjust its dimensions
      =================================================================================
      */      
      function sendDimension( ) {
        ...
      }
  6. Process Commands: This functions calls appropriate functions based on current Guidance step’s command. 
          /*
      =================================================================================
        Process commands
      =================================================================================
      */ 
      function processCommand( commandInternalName, stepId, transcriptId, data ) {
        

        // Proceed with processing the Command
        switch ( commandInternalName ) {

          case "demo-display-email-registration-form":

            // Disable Traversal
            disableUserResponses();

            showFormEmailRegistration(data);     

          break;

          case "demo-display-country-list":

            // Disable Traversal
            disableUserResponses();

            showFormChooseCountry(data);     

          break;

          case "demo-display-public-ip":

            // Disable Traversal
            disableUserResponses();

            showFormPublicIP(data);     

          break;


          default: 

        }
      }
  7. Helper functions 
          /*
      =================================================================================
        Helper functions
      =================================================================================
      */ 

      function addTranscriptId(transcriptId) {
        ...
      }
      function showMessage(formName, msg, error) {
        ...
      }
      function hideMessage(formName) {
        ...
      }      
      function restartSession() {
        ...
      }
      function hideAll() {
        ...
      }
      function clearAll() {
        ...
      }
      $(".home").click(function(e) {
        ...
      });
      $(".back").click(function(e) {
        ...
      });
      function addToPrevousSteps() {
        ...
      }
      function showHideBack() {
        ...
      }
      function showError(formName, message ) {
        ...    
      }
      function resetAttributes() {
        ...    
      }
      function getUserChoices() {
        ...    
      }

      $("form").submit(function() { return false; });
  8. Section Yonyx Embed: These functions are used to housekeep Yonyx Embed section. 
          /*
      =================================================================================
        YONYX EMBED
      =================================================================================
      */ 
      function getLandingPageUrlBrowse() {
        ...
      }
      function getLandingPageUrlSearch() {
        ...
      }
      function setEmbedUrl(url) {
        ...
      }
      function showYonyxEmbed() {
        ...
      }
      function hideYonyxEmbed() {
        ...
      }
  9. Section formLoading: These functions are used to housekeep wait screen. 
          /*
      =================================================================================
        FORM LOADING 
      =================================================================================
      */ 
      function showFormLoading() {
        ...
      }
      function hideFormLoading() {
        ...
      }
  10. Section FormGuidanceStep: These functions are used to housekeep FormGuidanceStep. 
          /*
      =================================================================================
        FORM GUIDANCE STEP
      =================================================================================
      */ 
      function showFormGuidanceStep(data) {
        ...
      }
      function revealFormGuidanceStep() {
        ...
      }      
      function hideFormGuidanceStep() {
        ...
      }
      function clearFormGuidanceStep() {
        ...
      }
      $("#formGuidanceStepWrapup").click(function(e) {
        ...
      });
      $("#formGuidanceStepBrowse").click(function(e) {
        ...
      });
      $("#formGuidanceStepSearch").click(function(e) {
        ...
      });
  11. Section FormEmailRegistration: These functions are used to housekeep FormEmailRegistration. 
          /*
      =================================================================================
        FORM EMAIL REGISTRATION
      =================================================================================
      */ 
      function showFormEmailRegistration(data) {
        ...     
      }

      function hideFormEmailRegistration() {
        ...    
      }
      function clearFormEmailRegistration() {
        ...    
      }
      $("#formEmailRegistrationContinue").click(function(e) {
        ...    
      });
  12. Section FormChooseCountry: These functions are used to housekeep FormChooseCountry. 
          /*
      =================================================================================
        FORM CHOOSE COUNTRY
      =================================================================================
      */       
      function showFormChooseCountry(data) {
        ...    
      }

      function hideFormChooseCountry() {
        ...    
      }
      function clearFormChooseCountry() {
        ...    
      }
      $("#formChooseCountryContinue").click(function(e) {
        ...    
      });
  13. Section FormPublicIP: These functions are used to housekeep FormPublicIP. 
          /*
      =================================================================================
        FORM PUBLIC IP
      =================================================================================
      */       
      function showFormPublicIP(data) {
        ...    
      }

      function hideFormPublicIP() {
        ...    
      }
      function clearFormPublicIP() {
        ...    
      }
      $("#formPublicIPContinue").click(function(e) {
        ...    
      });
  14. Section FormWrapup: These functions are used to housekeep FormWrapup. 
          /*
      =================================================================================
        FORM WRAPUP
      =================================================================================
      */   
      function showFormWrapup(data) {
        ...            
      } 
      function hideFormWrapup() {
        ...    
      }
      function clearFormWrapup() {
        ...    
      }

Step 3: Create Commands

Create 3 Commands like shown below. You will need Administrative privileges.

  1. demo-display-email-registration-form
  2. demo-display-country-list
  3. demo-display-public-ip

Step 4: Create Placeholders

Create 3 Placeholders like shown below. You will need Administrative privileges.

  1. demo-email-form-values
  2. demo-public-ip
  3. demo-country-name

Step 5: Create a Guide

Create a guide with nodes structured as shown below. You will need Authoring privileges.

Step 6: Add Commands

Choose these Commands in corresponding nodes.

  1. demo-display-country-list
  2. demo-display-public-ip
  3. demo-display-email-registration-form

Step 7: Set Auto-Traverse Conditions

Set auto-traverse conditions in corresponding user responses.

  1. Is Equal To : US
  2. Is Equal To : GB
  3. Is Not Equal To : US, Is Not Equal To : GB
  4. Is Equal To : success
  5. Is Equal To : failure
  6. Is Equal To : success
  7. Is Equal To : failure

Step 8: Insert Placeholders

Insert these Placeholders in corresponding nodes. Click here to learn how to insert a Placeholder.

  1. demo-country-name
  2. demo-country-name
  3. demo-public-ip
  4. demo-email-form-values

Step 9: Finally, make these changes

  1. Publish this guide to an LOB in your account.
  2. In the Javascript file, replace “https://testisp.yonyx.com” with your own Yonyx subdomain.
  3. In the Javascript file, replace “847eb630-047c-11e4-9638-bc764e10f0e8” with the LOB id where you just published the guide.
  4. Deploy your container app (html and javascript files) to a web server. LAMP or MAMP would work just fine during development and testing stages.
  5. Last but not least, email us at support@yonyx.com to let us know about your container app url, so we can whitelist it. Whitelisting is a necessary step for container apps to work.

Let us help you evaluate.

No credit card required. No strings attached.
Start Free EvaluationWatch Training Videos