All Collections
Getting Started with Bonusly
Setting up integrations with Bonusly:
Integrating the Bonusly Widget to an Intranet or HTML page
Integrating the Bonusly Widget to an Intranet or HTML page

Learn how to embed Bonusly as a widget to any HTML page that allows use of iframe.

Adrianne Hipsher avatar
Written by Adrianne Hipsher
Updated over a week ago

This Bonusly widget is an easy and quick way to view and give bonuses! πŸŽ‰ Β This widget could appear on your company website or be embedded on your intranet (such as Igloo or Sharepoint for example). You can also add it to any HTML page that allows the use of an iframe.

General directions:

First, copy this HTML code below:

<iframe src="https://bonus.ly/widgets" style="width: 800px; max-width: 100%; min-height: 600px; border: none; overflow: hidden;" frameborder="0" allowTransparency="true"></iframe>
​

Next, you'll want to paste the code snippet into the HTML on the page where you want the widget to appear.

Example html code being loaded into a dev site showing the iframe pasted in.

After you've saved it, you'll want to refresh your web page and you should see your Bonusly widget appear. πŸŽ‰Β 

The example site showing the Bonusly widget with the login page once the iframe code has been added to the HTML site.

Once you sign into Bonusly via the Bonusly Widget your screen should show the home feed:

Example site of what the Bonusly widget will look like once logged in, showing a condensed version of the full site.

You can then give and view received bonuses just like you would in the Bonusly Application! πŸŽ‰Β 

*If you click any of the hyperlinked words in the bonus from this widget it will open a new window where you can view this information from the Bonusly App. πŸ˜„
​

Adding Widget to Sharepoint Intranet

If you come across any issues trying to add the Bonusly widget to Sharepoint intranet, take the following steps to get the widget to work properly:

  1. Whitelist Bonus.ly in the HTML Field Security section Sharepoint

    Sharepoint HTML Field Security Capture highlighted as place to whitelist Bonusly.
  2. Tweak the embed code to get the widget to appear

    • remove "min-" from HTML code

    • there is not the "min-" before the width portion of the code so it was removed from height and that enabled the widget to work correctly

  3. Try the following: <iframe src="https://bonus.ly/widgets" style="width: 600px; height: 800px"></iframe>

    or: <iframe src="https://bonus.ly/widgets" style="width: 800px; max-width: 100%; min-height: 600px; border: none; overflow: hidden;" frameborder="0" allowTransparency="true"></iframe>


Questions? Send us a note to [email protected]; we'd be happy to help!

Was this article helpful? Let us know by rating it below with an emoji and sharing your feedback!

Did this answer your question?