In this post we will show you how you can simple HTML code to embed buttons in your hotspots. 

 

Log into your dashboard and open an existing tour in which you wish to add Buttons.


Here we will be using an existing tour to show you how can you embed Buttons in your hotspots.


Set the required scene in which the hotspot to be added. Edit the content,colour,opacity of the hotspot to match the overall theme of the room.




Click on the text field and you will get a tool bar. You can click on the Font awesome icon to add calender icon which will be inside the button that we create.

You can adjust colour, size etc in the Insert Font Awesome window.



 


Once you select the icon and make the necessary changes the icon will appear in the area where you have place the cursor.




Now for adding a button around the calender glaphicon you need to write a small HTML code in the source window of the Hotspot. 

   

<p style="text-align: center;font-size:20px;"><br />
<strong><a class="pure-button button-warning" href="http://www.hotel1898.com/en/barcelona-rooms-junior.php" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span class="fa fa-calendar" data-widget="FontAwesome" style="color:white;font-size:30px;"></span></span></span>&nbsp;Book Now</a></strong></p>

    

You can use different colour buttons by using below codes


class for button ::

pure-button

class of colors::

button-warning(Orange) , button-secondary(Light-Blue), button-error(Red), button-success(green), pure-button-primary(Dark-blue)






Similarly you can use Font Awesome to insert social networking website icons into your hotspots and link them to respective pages.




For adding a link to the Icons again you have to write a small code in the source window of the hotspot.


 

<a href="https://plus.google.com/100925239041603570077/?hl=en"target="_blank"><span class="fa fa-google-plus-square " style="color:red;font-size:40px;"></a></span>

  

Similarly you can add link to the Facebook Icon by just writing the same code and just changing the link.


Preview for mobile devices