Add a Floating "Earn" Button to Any Website

What is a floating rewards button?

A floating rewards button is a small button that stays in a corner of every page of your website and opens your offerwall in a pop-up when a user clicks it. On Sharklio it takes one script tag with the signed offerwall link of the signed-in user. You can change the text, the color, and the side of the screen, and users close the pop-up to return to exactly where they were.

It suits sites where users browse many pages, such as forums, blogs with accounts, browser games, and community sites, because the entry point is always one click away without giving the offerwall a page of its own.

What happens when a user clicks it

1. The button sits fixed in the bottom corner of the page, above your content.
2. A click opens a large pop-up over the page with the offerwall inside. The page behind it stops scrolling while it is open.
3. The user browses offers, starts them, and checks History, all inside the pop-up.
4. The user closes it with the close button, the Escape key, or a click outside it, and is back on the same page.
5. Rewards reach your server later through postbacks, exactly as with any other integration.

Users who arrive this way show as Floating button in your statistics, and your postbacks can carry {integration} with the value button, so you can tell button earnings apart from your other entry points.

The snippet

When you create an app on Sharklio, you choose how it shows the offers. Pick Floating button, and once the app is approved its Integration tab shows the code with your link already in it:

<script src="https://wall.sharklio.com/embed.js" async
  data-button-url="https://wall.sharklio.com/{APP_ID}?user_id={USER_ID}&amp;hash={HASH}"
  data-button-text="Earn rewards"
  data-button-color="#004ABB"
  data-button-position="right"></script>

Keep the label short and honest. “Earn coins” or “Earn rewards” tells users what they get. “Free money” promises something no offerwall delivers and invites the wrong kind of traffic. Move the button to the left if a chat widget or a cookie banner already uses the bottom right corner.

Build the link for each signed-in user

The {USER_ID} and {HASH} in the snippet are placeholders. Your server replaces them for every signed-in user when it renders the page. The user ID is the ID of the account in your system, and the hash is an HMAC-SHA256 of that ID with your app’s link hash salt, in lowercase hex. In PHP, for example:

<?php if ($currentUser): ?>
<?php
$userId = (string) $currentUser->id;
$hash = hash_hmac('sha256', $userId, $linkHashSalt);
$link = 'https://wall.sharklio.com/' . $appId . '?user_id=' . rawurlencode($userId) . '&hash=' . $hash;
?>
<script src="https://wall.sharklio.com/embed.js" async
  data-button-url="<?= htmlspecialchars($link) ?>"
  data-button-text="Earn coins"></script>
<?php endif; ?>

• Only for signed-in users. Logged-out visitors get no button at all, or your own log-in prompt. Rewards need an account to land in.
• The salt never reaches the browser. The script only needs the finished link. It never asks for your salt or keys, and it only opens links that start with the Sharklio offerwall address.
• Mind your page cache. A page with a signed link belongs to one user, so it must not be cached and served to others.

The Offerwall link docs have the same hash code in Node.js and Python. On WordPress, How to add an offerwall to WordPress shows the button added through a small plugin.

Where the pop-up works

For safety, the offerwall only loads inside frames and pop-ups on the website you registered for the app and its subdomains, and only on https pages. A Floating button app registered for example.com works on example.com, www.example.com, and forum.example.com. On a staging domain, on plain http, or on a different site, the pop-up opens but the offerwall inside it does not load.

Need the offerwall somewhere else as well, for example in a mobile app or a Discord message? Add a second app of the Direct link type. The integration type cannot be changed once an app is live, and each app keeps its own statistics, keys, and postback settings, so you can compare the button with your other entry points.

Open it from your own button, link, or JavaScript

You do not have to use the floating button itself. If your menu already has a Rewards item, add data-sharklio-open to it and load the script once on the page:

<a href="https://wall.sharklio.com/{APP_ID}?user_id={USER_ID}&amp;hash={HASH}" data-sharklio-open>Rewards</a>
<script src="https://wall.sharklio.com/embed.js" async></script>

A click opens the same pop-up instead of a new page. If the script does not load, for example because an extension blocks it, the link still works and opens the offerwall as a normal page. That fallback is the reason to prefer a real link with an href over a bare button.

From your own JavaScript, call Sharklio.open(link) with the signed link. Call it from a click handler, and keep a fallback for the moment before the script has loaded:

document.getElementById('earn').addEventListener('click', function () {
  if (window.Sharklio && window.Sharklio.open) {
    window.Sharklio.open(wallLink);
  } else {
    window.location.href = wallLink;
  }
});

Here wallLink is the signed link your server put into the page. Never build it in the browser, because that would need the salt.

When a button beats a dedicated page

A dedicated page also gives you room above the offerwall to explain your currency and how long credits take. If the offerwall is your main product, read How to start a rewards website. For a side-by-side of every method, see Offerwall integration: iframe, link or API?

Placement: what to do and what to avoid

The single most important rule: the offerwall opens only when the user clicks. Sharklio’s terms forbid placing the offerwall in pop-ups or new windows that open without the end user’s click, while opening it in a pop-up after a click, for example with the embed script, is allowed.

End users must be at least 16 to use an offerwall powered by Sharklio, so do not show the button on sites made for children. Offerwall placement: where to put it to earn more covers timing and entry-point design in depth.

Troubleshooting the button

• No button appears. data-button-url is missing or is not a Sharklio offerwall link, and the browser console shows a warning from Sharklio embed. Also check that nothing on your page blocks the script, and that you print it only after you have a signed-in user.
• The pop-up opens but stays blank. The page is not on the registered website or a subdomain of it, or it is served over http.
• Link not valid inside the pop-up. The hash does not match the user ID. Use the Test a link tool in the Integration tab and compare its link with the one in your page source.
• Rewards do not arrive. The button only opens the offerwall. Crediting happens in your postback handler, so check Reports, Postbacks and read Postback security: verify every reward call.

Frequently asked questions