Embedded Widget Integration

To add your HIO.HOVR widget as an embedded (static) element

Your HIO.HOVR widget has two options for being displayed on your website:
"Floating over your site" (default) or "Embedded in your UI".

Installation

335

If you choose "Embedded in your UI", you can choose where the Hovr widget will be placed inside the content of your page, like next to a video. The element that contains it should have static width: 360px and min-height: 450px. There is no maximum height, but up to 750px is recommended for users with various browser sizes.

323

The code snippet should be pasted thoughtfully inside your HTML within the container element you have sized for it, normally right next to your main video or schedule element, wherever you think it will have the most engagement. Your code snippet should look something like this:

<!-- Hio Web Plugin code starts here -->
<!-- paste this code in an HTML element where it should be displayed -->
<div id="hio-site-identifier" data-id="<<YOUR-SITE-ID>>"></div>
<script src="https://dev-plugin-helper.hiosocial.com/plugin_loader.js"></script>
<!-- Hio Web Plugin code ends here -->

Troubleshooting

It can sometimes take some work to get the embed showing up well on the page. The easiest way to do this is to make sure that you have the container set up perfectly first. Firstly, decide where on the page you want the embedded widget, and make sure the width of the container is exactly 360px (slightly more is fine, but no less). This is normally done with CSS: "width: 360px". The height of the container should be 450px at minimum and it's recommended up to 700px: "height: 450px" up to "height: 700px". An example CSS class could look like this:

.hio-container {
  width: 360px;
  height: 575px; /* height: 450px or more */
}

Often you will try to place this side-by-side with a video or schedule column. An easy way to distribute two columns flexibly is with CSS Flexbox. Using "display: flex" on a parent element will put the child elements in a row. There are additional settings for flexbox you can see here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. In the HTML example below, we have a section element for the whole row, and inside that we have two columns, the first one for the video element, and the second one for the Hovr widget, using the custom hio-container CSS class described above:

<section style="display: flex; justify-content: center;">
  <video></video>
  <div class="hio-container">
    <div id="hio-site-identifier" data-id="<<YOUR-SITE-ID>>"></div>
    <script src="https://dev-plugin-helper.hiosocial.com/plugin_loader.js"></script>
  </div>
</section