|
|
| (11 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| | =Genesys Widgets Deployment Guide= | | =Genesys Widgets Deployment Guide= |
| − | __NOTOC__
| |
| − | This guide provides the steps required to instrument your website with Genesys Widgets.
| |
| | | | |
| − | ==Audience==
| + | {{Template:PEC_Migrated}} |
| | | | |
| − | This document is for website developers who are in charge of the website code. You should have knowledge of HTML, JavaScript, and CSS.
| |
| | | | |
| − | ==How Do I Deploy Genesys Widgets?==
| + | {{NoteFormat|Documentation for this software has moved to a new home. Please update links and bookmarks to content hosted at https://all.docs.genesys.com/WID/Current/Developer/GWCDeployment.}} |
| | | | |
| − | # Embed Genesys Widgets into your website
| + | [[Category:V:PSAAS:Public]]{{Cargo_Popular|Title={{PONYDOCSTITLE}}}} |
| − | # [[GWCConfig|Configure your Genesys Widgets]]
| |
| − | # [[GWCInternat|Setup Localization Options and Languages]]
| |
| − | # [[GWCCustomize|Styling Genesys Widgets]]
| |
| − | | |
| − | {{AnchorDiv|GWCDeploySteps}}
| |
| − | | |
| − | == How to embed the Genesys Widgets into your website==
| |
| − | | |
| − | Unzip the Genesys Widgets package to your web server, and then locate the path to your copy of the '''widgets.min.js''' file.
| |
| − | | |
| − | you can choose from the following methods to include the Genesys Widgets package on your webpage:
| |
| − | | |
| − | ===Inline Javascript Include===
| |
| − | | |
| − | Add a script tag to include the Genesys Widgets package file (widgets.min.js)
| |
| − | | |
| − | <source lang="javascript">
| |
| − | | |
| − | <script id="genesys-widgets-script" src="http://www.yourhost.com/path/to/widgets.min.js"></script>
| |
| − | | |
| − | </source>
| |
| − | | |
| − | ===Inline Stylesheet/CSS Include===
| |
| − | Add a link tag to include the Genesys Widgets stylesheet package file (widgets.min.css)
| |
| − | | |
| − | <source lang="javascript">
| |
| − | <link id="genesys-widgets-styles" href="http://www.yourhost.com/path/to/widgets.min.css" type="text/css" rel="stylesheet"/>
| |
| − | </source>
| |
| − | | |
| − | ===Dynamically Generate the Javascript Include===
| |
| − | | |
| − | The following code snippet will generate a script and link include tag automatically and provides you the option of loading the files immediately or delay loading the files until after the parent page has finished loading its content
| |
| − | | |
| − | <source lang="javascript">
| |
| − | | |
| − | // Widgets Instrumentation Script
| |
| − | <script>
| |
| − | (function(o){var f = function(){var d = o.location;o.aTags = o.aTags || [];
| |
| − | for(var i=0;i<o.aTags.length;i++){var oTag = o.aTags[i];var fs = d.getElementsByTagName(oTag.type)[0], e;
| |
| − | if(d.getElementById(oTag.id)) return; e = d.createElement(oTag.type); e.id = oTag.id;if(oTag.type == "script"){e.src = oTag.path;}
| |
| − | else{e.type = 'text/css';e.rel = 'stylesheet';e.href = oTag.path;}if(fs){fs.parentNode.insertBefore(e, fs);}else{d.head.appendChild(e);}
| |
| − | }},ol = window.onload;if(o.onload){typeof window.onload != "function"?window.onload=f:window.onload=function(){ol();f();}}else f();})({
| |
| − | | |
| − | location: document,
| |
| − | onload: false,
| |
| − | aTags: [
| |
| − |
| |
| − | {
| |
| − | type:"script",
| |
| − | id:"genesys-widgets-script",
| |
| − | path:"http://www.host.com/path/to/widgets.min.js"
| |
| − | },
| |
| − | {
| |
| − | type:"link",
| |
| − | id:"genesys-widgets-styles",
| |
| − | path:"http://www.host.com/path/to/widgets.min.css"
| |
| − | }
| |
| − | ]
| |
| − | });
| |
| − | </script>
| |
| − | | |
| − | </source>
| |
| − | | |
| − | This script will dynamically generate a Javascript include <script> tag+, CSS include <link> tag+ and place it into the page. By default the ID for the generated script and link tags are "genesys-widgets-script" and "genesys-widgets-styles". You may modify these ID's in the above script.
| |
| − | | |
| − | The following object is passed in with additional options:
| |
| − | | |
| − | <source lang="javascript">
| |
| − | {
| |
| − | location: document,
| |
| − | onload: false,
| |
| − | aTags: [
| |
| − | {
| |
| − | type:"script",
| |
| − | id:"genesys-widgets-script",
| |
| − | path:"http://www.yourhost.com/path/to/widgets.min.js"
| |
| − | },
| |
| − | {
| |
| − | type:"link",
| |
| − | id:"genesys-widgets-styles",
| |
| − | path:"http://www.yourhost.com/path/to/widgets.min.css"
| |
| − | }
| |
| − | ]
| |
| − | }
| |
| − | </source>
| |
| − | | |
| − | ====location====
| |
| − | location is your page document scope that can be used to inject widgets script and link tags.
| |
| − | | |
| − | ====onload====
| |
| − | onload is an optional flag that, when set to true, will delay loading the Widgets files until after the webpage has fully loaded (window.onload). By default this value is false and the Widgets files are loaded immediately.
| |
| − | | |
| − | ====path====
| |
| − | path is the URL or path to the location of the Genesys Widgets Javascript and CSS files that Genesys provides. You can host these files on your own web servers or on a Content Delivery Network (CDN).
| |
| − | | |
| − | ====type====
| |
| − | type is the html tag type that will be added in to the page i.e. 'script' tag for Javascript file and 'link' tag for CSS file.
| |
| − | | |
| − | Now you can [[GWCConfig|configure the Genesys Widgets]] and the products and services associated with it.
| |
| − | {{Cargo_Popular|Title={{PONYDOCSTITLE}}}} | |
| − | [[Category:V:PSAAS:Public]]
| |
