Web

2024-11-13 12:54

Step 1: Set Up the Environment

Configure the development environment for either iOS or Android based on your current system.

Step 2: Render widget in Web page

Note: Currently widget only support web page run in Griver container

1. Add web sdk to <head> section.

copy
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,viewport-fit=cover">
    <!-- A+ Marketing sdk -->
    <script type="text/javascript" src="https://cdn.marmot-cloud.com/page/intl-assets/iapmarketing/{LATEST_VERSION}/50/iapmarketing.min.js"></script>
    ...
    <title>My Rewards</title>
  </head>
  <body>
  </body>
</html>

2. Render widget content in the reserved slot or on demand.

1): Render in reserved slot automatically

Mark a div with class "marketing-spot", set position id by data attribute. H5 SDK will render marketing content in the div automatically.

copy
<body>
  ...
  <div class="marketing-spot" data-position-id="YOUR_POSITIONID" data-dpr="1"></div>
  ...
</body>

2): Render the content on demand

Call window.IAPMarketing.render function by hand. The function defined below:

copy
window.IAPMarketing.render(postionId: string, node: HTMLElement);

Example:

copy
// in your javascript
<script>
    document.addEventListener("AlipayJSBridgeReady", (event) => {
    // render the content after dom loaded
     window.IAPMarketing.render("YOUR_POSITIONID", document.querySelector('#alipay-content-container'));
  });
</script>
<div id="alipay-content-container"></div>

Note: if you wan't to render A+ content when dom is ready, use AlipayJSBridgeReady event instead of DOMContentLoaded.

Step 3: Use Griver container to open your web page

refer to openUrl

copy
Griver.openUrl(activity, url, bundle);

Validate the integration

After you've finished the previous steps, notify Alipay+ team to configure the delivery content. When all the configuration work is done, you'll see the marketing content rendered in your app page.