Embedding a Click Witchery presentation in your web page!

There are two ways to embed a Click Witchery presentation in a HTML page, iframe and jQuery.

A very effective way is to use the iframe function. To do this, log into https://sys.clickwitchery.com/, create the presentation you want to embed in a HTML page and to the embed option on the left hand side. You will be given the following options which will control what your embedded presentation will look and do.

Field

Description

Type

Whether the embedding method is iframe or jQuery.

Width

This can be a pixel width or a percentage.

height

The height

Right navigation bar

Whether the right navigation bar is visible

Padding

How much padding.

object names

Whether object names are visible.

descriptions of objects

Whether descriptions of objects are visible

The background color of the internal

The background color used internally.

The background color

The background color

 

 

You then just have to select the button “Generate the embed code” and a dialog will appear with the code which you then copy to your HTML page and you have an embedded Click Witchery presentation.

The jQuery option is more powerful than the iframe and slightly more complex to implement. When you select the jQuery you are given more options as you can see below.

embed1

 

Field

Description

Type

Whether the embedding method is iframe or jQuery.

Width

This can be a pixel width or a percentage.

Maximum images height

Maximum height

Keep constant height

Whether the height changes if the page changes

Right navigation bar

Whether the right navigation bar is visible

Minimum width of desktop view

Minimum width

Padding

How much padding.

object names

Whether object names are visible

descriptions of objects

Whether descriptions of objects are visible

Display share buttons

Whether share buttons are visible

The background color of the internal

The background color used internally.

The background color

The background color

 

To add the jQuery to your HTML page you need to add code to the header of the page as well as within the page itself. Select the button “Generate the embed code”. The dialog below will appear.

embed jQuery

You need to copy two sets of code to the header file and one to the body of the page.

In the header section you should add the following line of code:

<script src=”https://code.jquery.com/jquery-2.2.3.min.js”></script>

Followed by these lines of code:

<script src=”https://sys.clickwitchery.com/presentation/jquery.presentation.js”></script>

<link href=”https://sys.clickwitchery.com/presentation/jquery.presentation.min.css” rel=”stylesheet”>

This only needs to be done once on a page.

You then need to copy the code for embed itself. You must have a unique id for each embedded jQuery so you should change the label “presentation-container” to a unique identifier. The code should look something like this:

<div id=”presentation-1234″></div><script>$(document).ready(function() { $(‘#presentation-1234’).presentation({

“presentationId”: “44”,

“displaySidebar”: true,

“displayNames”: true,

“displayDescriptions”: true,

“displayShareButtons”: true,

“internalBackground”: “rgba(255,255,255,1)”,

“externalBackground”: “rgba(255,255,255,1)”

}); });</script>

 

WordPress

If you are using WordPress, you can add the lines to the header file by going to Appearance and then select editor. You should then select the PHP page which is used for your header file. This is usually header.php. The following code should be inserted just below the meta information:

<script src=”https://code.jquery.com/jquery-2.2.3.min.js”></script>

<script src=”https://sys.clickwitchery.com/presentation/jquery.presentation.js”></script>

<link href=”https://sys.clickwitchery.com/presentation/jquery.presentation.min.css” rel=”stylesheet”>

WordPress Editor

I look forward to seeing your embedded Click Witchery presentations. I hope you enjoy creating them!

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *