We present the new
360 MagicTour button

Now you can show your 360ยบ tour in your webpage by adding the button below. Clicking on it will open an interactive window, that will let your visitors make the wonderful tour you created.

Take a look for yourself!

Sizes

There are 3 rectangular button sizes and 3 simple button sizes available.
Choose the one that fits you most!

Rectangular buttons

Large

Medium

Small

Simple buttons

Large

Medium

Small

How do I use it?

Follow these indications:

The script

Copy and paste this script at the end of the body of your HTML.

<script src="https://www.360magictour.com/new_button/embed_code/embed/interactive-embed-code.js"></script>

The iframe

Copy and paste this div in the body of your HTML.

<div id="interactiveIframeDiv" class="interactiveModalDivHidden"></div>

The CSS

Copy and paste these links at the end of the head of your HTML.

<link href="https://www.360magictour.com/new_button/embed_code/embed/interactive-iframe.css" rel="stylesheet">

<link href="https://www.360magictour.com/new_button/embed_code/embed/interactive-buttons.css" rel="stylesheet">

The button

Copy and paste the code for the button you chose in the place you want to put it.

Large rectangular button

<p class="interactiveButton magictour-rectangular-btn" onclick='clickInteractiveButton(" The link of your tour ")'>

<button class="btn-A-lg btn-B btn-C">

<img class="large_image" src="https://www.360magictour.com/new_button/embed_code/embed/img/large.png">

</button>

</p>

Medium rectangular button

<p class="interactiveButton magictour-rectangular-btn" onclick='clickInteractiveButton(" The link of your tour ")'>

<button class="btn-A-md btn-B btn-C">

<img class="medium_image" src="https://www.360magictour.com/new_button/embed_code/embed/img/medium.png">

</button>

</p>

Small rectangular button

<p class="interactiveButton magictour-rectangular-btn" onclick='clickInteractiveButton(" The link of your tour ")'>

<button class="btn-A-sm btn-B btn-C">

<img class="small_image" src="https://www.360magictour.com/new_button/embed_code/embed/img/small.png">

</button>

</p>

Large simple button

<div class="interactiveButton magictour-simple-btn" onclick='clickInteractiveButton(" The link of your tour ")'>

<img class="large_image" src="https://www.360magictour.com/new_button/embed_code/embed/img/large.png">

</div>

Medium simple button

<div class="interactiveButton magictour-simple-btn" onclick='clickInteractiveButton(" The link of your tour ")'>

<img class="medium_image" src="https://www.360magictour.com/new_button/embed_code/embed/img/medium.png">

</div>

Small simple button

<div class="interactiveButton magictour-simple-btn" onclick='clickInteractiveButton(" The link of your tour ")'>

<img class="small_image" src="https://www.360magictour.com/new_button/embed_code/embed/img/small.png">

</div>

In case you want to create your own button:

You don't have to paste the second CSS link in your HTML.

You can use any element, but it must be class="interactiveButton".
In the tag of the element, add the onclick event with the function clickInteractiveButton(" The link of your tour ").

Your code should partially look like this example:

<button class="interactiveButton other-classes-you-want" onclick='clickInteractiveButton("https://magictour/my_project")'

<!-- All the tags needed for the creation of the button. -->

</button>

Aside from the class interactiveButton you can add all the classes that you want to stylize your element.

You can use the 360 MagicTour hexagonal icon to create your button:

Download icons

Download a demo of the button:

Download RAR