Installation Help

Installation instructions to install Vizaport widgets on web sites

Which widget are you installing?

Chat Widget

<script>

Visual Widget

<iframe>

Chat Widget (Popup)

The chat widget can be installed on a single page or in a global file such as the footer to be on all pages

Step 1: From your widget configuration page, select Chat Widget, scroll to the bottom and copy <script> code.

Your customized code should look similar to the following (customized with your key and settings):

<script data-minify="false" type="text/javascript" src='https://widget.vizaport.com/javascript/chat.js?key=XXXXX'></script>

Step 2: In an HTML editor, paste the <script> code to a single page or a global module (such as a footer).

Pasting code into HTML of your site varies based on the technology your web site uses. If you have direct access to modify HTML for your web pages, place the entire <script> code from Step 1 into your web site, in any location of the page, because the Javascript will always position at the bottom of your page anyway.  We suggest a global module, such as the footer so that it appears on every page.  Place it within or after <body> tags. Do not place it within the <head> tags.

If you use a popular content management system (such as WordPress), check below for detailed instructions for your CMS and then skip to Step 3 in this process. 

If you use a WordPress server, click for installation instructions.

If you use a SquareSpace server, click for installation instructions.

If you use a Wix server, click for installation instructions.

If you use a Shopify server, click for installation instructions.

If you use a GoDaddy Website Builder server, click for installation instructions.

If you do not use a CMS listed above… locate the ability to place native HTML code into your page or global settings.  You will want to use the HTML editor view, such as the example below. Note that the “Text” view is selected to copy HTML directly in the example. 

Step 3: Confirm the chat widget appears on your site. Click on the tab at bottom of page to open.

Confirm that the widget is appearing. Click on the tab at the bottom of the page, open the widget, and test an input question. If the widget says that a license key is required, check that your subscription is active. The following is an example web site.  Notice the “Help” popup in the bottom right for this example widget.

If you use web site caching, you may need to purge the cache before the widget appears.

Chat Widget (Embed)

The chat widget can be also be embedded directly into the page without the need to click on a popup icon

Step 1: From your widget configuration page, select Chat Widget, scroll to the bottom and copy <script> code.

Your customized code should look similar to the following (customized with your key and settings):

<script data-minify="false" type="text/javascript" src='https://widget.vizaport.com/javascript/chat.js?key=XXXXX'></script>

Next, copy the following code along with your script code.  This <div> triggers a page embed.

<div id="vz-chat-container"></div>

Step 2: In an HTML editor, paste the <script> and <div> code from Step 1 onto the section of the page you want to embed

Pasting code into HTML of your site varies based on the technology your web site uses. Locate the location on the web page where you want the chat to be embedded. You may resize and style the chat using CSS.  The important thing is to save space for the div with id vz-chat-container and style as appropriate.  The following is an example with styled CSS, with the complete <script> and <div>.  It is only one example and you may modify the CSS for your styling. 

<script data-minify="false" type="text/javascript" src='https://widget.vizaport.com/javascript/chat.js?key=XXXXX'></script>
<div id="vz-chat-container" font-size: 130% !important; margin-left: 200px; margin-right: 200px; margin-bottom: 200px; height: 600px;></div>

Step 3: Confirm the chat widget is embedded on the page in the desired location.

Confirm that the widget is appearing on the page. If needed, return to Step 2 to style the widget as necessary for placement on the page. The following is an example of how the embed may look on your page after styling.

Visual Widget

The visual widget can be installed on a single page in your desired location

Step 1: From your widget configuration page, select Visual Widget, scroll to the bottom and copy <iframe> code.

Your customized code should look similar to the following (customized with your key and settings):

<iframe id="vizaportWidget" src="https://widget.vizaport.com/iframe?key=XXXXX&fiberOnQuery=true&fiber_icon=true&welcomePageUrl=https://widget.vizaport.com/examples/homepages/fiber.html" height="650px" style="display: block; margin: 0 auto; overflow-y: hidden; width: 100%;" allow="camera; microphone"></iframe>

Step 2: In an HTML editor, paste the <iframe> code to a single page in a space designated for the iframe.

Pasting code into HTML of your site varies based on the technology your web site uses. If you have direct access to modify HTML for your web pages, place the entire <iframe> code from Step 1 into your web site, in the space you have designated for the iframe. You can adjust the width and height parameters in the iframe code as necessary to fit your space.

If you use a content management system, such as WordPress for your web site, locate the ability to place native HTML code into your page or global settings.  You will want to use the HTML editor view.  The following is an example for WordPress, although note that WordPress has many different themes and the steps may vary for each theme. The following example uses the Code module in the popular Divi theme.  Other themes and CMS will likely require the Text view to insert HTML.

iFrame Divi Example

Step 3: Confirm the visual widget appears on your page.

Confirm that the widget is appearing. It should appear in the location that you designated on your page for the iframe. If the widget says that a license key is required, check that your subscription is active. The following is an example web site with the visual widget.