Suloro Suloro Ads
Documentation / Suloro Ads / Web Guide

Web Ad Integration Guide

Deploy ultra-fast, encrypted ad tags served directly from cdn.suloro.com. Supports standard HTML, SPAs, and React/Next.js with zero layout shift.

2. Fullscreen Interstitial (cdn.suloro.com/js/ads/interstitial.js)

Trigger fullscreen interstitial overlays between user workflows (e.g. level completion or navigating articles):

interstitial.html
<script async src="https://cdn.suloro.com/js/ads/interstitial.js"></script>

<script>
  function onUserLevelComplete() {
    if (window.SuloroAds && window.SuloroAds.showInterstitial) {
      window.SuloroAds.showInterstitial({
        adUnitId: 'SA-TEST-INTERSTITIAL-01',
        onDismiss: function() {
          // Resume game or advance route
          loadNextLevel();
        }
      });
    }
  }
</script>

3. Rewarded Ad Tag (cdn.suloro.com/js/ads/rewarded.js)

Provide users in-app benefits or free coins upon watching a brief 5-second simulated ad creative:

rewarded.html
<script async src="https://cdn.suloro.com/js/ads/rewarded.js"></script>

<script>
  function claimDailyBonus() {
    if (window.SuloroAds && window.SuloroAds.showRewarded) {
      window.SuloroAds.showRewarded({
        adUnitId: 'SA-TEST-REWARDED-01',
        onReward: function(reward) {
          // Grant reward to publisher user
          grantInGameCoins(100);
        }
      });
    }
  }
</script>

4. Unified Master SDK (cdn.suloro.com/js/ads/suloro-ads.js)

If you utilize multiple formats across your web application, include the all-in-one master SDK:

header.html
<script async src="https://cdn.suloro.com/js/ads/suloro-ads.js"></script>

5. React & Next.js Component

SuloroBanner.jsx
import { useEffect } from 'react';

export default function SuloroBanner({ adUnitId = "SA-BA-987654321012" }) {
  useEffect(() => {
    if (window.SuloroAds && window.SuloroAds.refresh) {
      window.SuloroAds.refresh();
    }
  }, [adUnitId]);

  return (
    <div
      className="suloro-ad-slot"
      data-ad-unit={adUnitId}
      data-ad-format="banner"
      data-adaptive="true"
    />
  );
}