wengzilla/migration_vanilla.md

## migration_vanilla.md

      
    Raw
  

              migration_vanilla.md
            
          
    HypeLab SDK Migration Guide - Vanilla

Installation


Remove the hypelab-vanilla script tag from your head tag.
Remove any script referencing the HypeLab client, and any call to HypeLab.setClient(client);
Include the HypeLab SDK script tag as shown in our docs.
Example:

 <head>
-    <script src="https://cdn.jsdelivr.net/gh/gohypelab/hypelab-vanilla@vX.X.X/index.js"></script>
+    <script defer src="https://api.hypelab.com/v1/scripts/hp-sdk.js?v=0"></script>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        HypeLab.initialize({
+          URL: '<api_url>',
+          propertySlug: '<property_slug>',
+          environment: '<environment>',
+        });
+      });
+    </script>
 </head>
 <body>
-    <script>
-      let client = new HypeLab.Client({
-        URL: 'https://api.hypelab-staging.com',
-        // URL: 'https://api.hypelab.com', /* Production URL */
-        propertySlug: '<PROPERTY_SLUG>',
-        environment: HypeLab.Environment.Development,
-        // environment: HypeLab.Environment.Production, /* Production Environment */
-      });
-
-      HypeLab.setClient(client);
-    </script>
 </body>
Setting a wallet address


Call HypeLab.setWalletAddress(walletAddress) instead of client.identity.setWalletAddress(walletAddress).

Formats

Banner


Remove any calls to HypeLab.banner(...).
Replace your DOM banner element with a hype-banner element and include the placement attribute.
Example:

-<script>
-    HypeLab.banner({ placement: '<PLACEMENT_SLUG>', container: 'bannerSlot' });
-</script>
-<div id="bannerSlot"></div>
+<hype-banner placement="banner_placement"></hype-banner>
Native


Remove any calls to HypeLab.native(...).
Replace the native container div with a hype-native element and include the placement attribute.
Example:

-<script>
-    HypeLab.native({ placement: '<PLACEMENT_SLUG>', container: 'nativeSlot' });
-</script>
-<div id="nativeSlot">
+<hype-native placement="native_placement">
     <div class="bg-black p-5">
         <div class="relative flex items-center">
             <div class="flex-shrink-0">
                 <img data-ref="icon" class="h-10 w-10 rounded-full mr-5" />
             </div>
             <div class="min-w-0 flex-1">
                 <span class="absolute inset-0" aria-hidden="true"></span>
                 <p class="font-medium text-slate-400">@<span data-ref="advertiser"></span></p>
                 <p data-ref="displayUrl" class="text-emerald-300 text-sm"></p>
             </div>
         </div>
         <div data-ref="body" class="mt-3 text-white"></div>
         <div class="body-row text-left">
             <div data-ref="headline" class="mt-3 text-white"></div>
             <div class="mt-5">
                 <a data-ref="ctaLink" href="/" target="_blank" rel="noreferrer">
                     <div data-ref="mediaContent" class="mediaContent"></div>
                     <div
                         data-ref="ctaText"
                         class="rounded-full bg-emerald-300 px-10 py-2 text-black font-bold mt-5 text-center"
                     ></div>
                 </a>
             </div>
         </div>
     </div>
-</div>
+</hype-native>
Rewarded


Remove any calls to HypeLab.rewarded(...).
Replace the rewarded container div with a hype-rewarded element and include the placement attribute.
Use a reference to the hype-rewarded element to show the ad: document.getElementById('rewarded').show().
Add event listeners to the hype-rewarded element to listen for ready, error, and complete events.
Example:

 <script>
-    const handleRewarded = function () {
-        // Grant a reward (e.g., Give an in-game item, unlock a paywall, etc.)
-        console.log('handleRewarded called');
-    };
-
-    var rewarded = HypeLab.rewarded({ placement: 'rewarded_placement', container: 'rewarded', onComplete: handleRewarded });
-
-    document.getElementById('hypelab-btn').addEventListener('click', function () {
-        rewarded.show();
-    });
+    document.addEventListener('DOMContentLoaded', function () {
+        const rewarded = document.getElementById('rewarded');
+        const button = document.getElementById('hypelab-btn');
+
+        button.addEventListener('click', function () {
+            rewarded.show();
+        });
+
+        rewarded.addEventListener('ready', function () {
+            button.disabled = false;
+        });
+
+        rewarded.addEventListener('error', function () {
+            button.disabled = true;
+        });
+
+        rewarded.addEventListener('complete', function () {
+            button.disabled = true;
+            // Grant a reward (e.g., Give an in-game item, unlock a paywall, etc.)
+        });
+    });
 </script>
-
-<div id="rewarded"></div>
+ <hype-rewarded id="rewarded" placement="rewarded_placement">
 <div>
     <button
         id="hypelab-btn"
         className="rounded-md border border-gray-300 bg-indigo-600 px-4 py-2 text-lg text-white"
     >
         Watch Video
     </button>
 </div>