AppLixir

https://support.applixir.com
Admin
AppLixir is a programmatic rewarded video advertising platform for web games and content publishers...
Tokens:18,266
Snippets:314
Trust Score:8.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Sample HTML5 Integration with Button Click

Source: https://support.applixir.com/download-samples-and-other-sdk-support-items

A complete HTML5 integration example. It includes a button to trigger an ad, an anchor div for the player, and grants a reward upon ad completion. Ensure to reconcile rewards with your server webhook.

```html
<!DOCTYPE html>
<html>
<head>
  <title>AppLixir Sample</title>
</head>
<body>
  <button id="watchBtn">Watch ad for 50 coins</button>
  <div id="applixir-ad-container"></div>
  <script src="https://cdn.applixir.com/applixir.app.v6.1.0.js"></script>
  <script>
    document.getElementById('watchBtn').addEventListener('click', () => {
      initializeAndOpenPlayer({
        apiKey: "YOUR-API-KEY-HERE",
        adStatusCallbackFn: (status) => {
          if (status.type === "complete") {
            // Grant the reward (optimistic UI)
            console.log("+50 coins!");
            // Reconcile with your server webhook for the authoritative grant
          }
        }
      });
    });
  </script>
</body>
</html>
```

--------------------------------

### HTML5 SDK Installation

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/overview-html-integration-360055393693

Add this script tag to the `<head>` of your HTML page to include the AppLixir SDK. It is recommended to pin to a specific version like `v6.1.0` for stable updates.

```html
<script  
  src="https://cdn.applixir.com/applixir.app.v6.1.0.js"  
  async  
></script>
```

--------------------------------

### Initialize and Play Ad in Android App

Source: https://support.applixir.com/applixir-integration/android-app-integration/applixir-ads-android-sdk-5418083969687

Example of initializing the AppLixirAdPlayer and playing an ad when a button is clicked. Ensure you replace 'APPLIXIR_API_KEY' with your actual API key. The callback will be invoked upon ad completion.

```kotlin
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            TestApplixirAdsSDKLibraryTheme {
                Scaffold(
                    modifier = Modifier
                        .fillMaxSize()
                        .systemBarsPadding() // replaces enableEdgeToEdge()
                ) {
                    innerPadding ->
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding),
                        contentAlignment = Alignment.Center
                    ) {
                        Button(onClick = {
                            val player = AppLixirAdPlayer(this@MainActivity)
                            player.setApiKey("APPLIXIR_API_KEY")
                            player.playAd(this@MainActivity) {
                                println("Ad completed")
                            }
                        }) {
                            Text("Open Ad", fontSize = 18.sp)
                        }
                    }
                }
            }
        }
    }
}
```

--------------------------------

### Declare Event Handler in Start Method

Source: https://support.applixir.com/applixir-integration/cocos-integration/the-integration-4409722907671

In the start method, register an event listener for 'ApplixirStatusChange' to handle updates from the AppLixir SDK. This ensures your game reacts to ad status changes.

```typescript
Start () {

  this.applixir?,node.on(“ApplixirStatusChange”, this.onApplixirStatusUpdate, this);

}
```

--------------------------------

### Clone AppLixir iOS SDK Repository

Source: https://support.applixir.com/applixir-integration/ios-app-integration/applixir-ads-ios-integration-360054041033

Clone the AppLixir iOS SDK repository to your local machine to get started.

```bash
cd existing_repo

git remote add origin https://github.com/applixirinc/iOS-sdk

git branch -M main

git push -uf origin main
```

--------------------------------

### Initialize and Control Player with Application Class

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/step-3-initializing-video-ad-360053982853

Utilize the Application class for a more structured approach to initializing and controlling the video ad player. This method allows for better management of the player's lifecycle. Ensure all prerequisites are met, create an Application instance, and call initialize() on window load before opening the player.

```javascript
<script type="text/javascript">  
  const options = {  
    apiKey: "xxxx-xxxx-xxxx-xxxx", // Replace with your actual API key  
    injectionElementId: "some-id" // This is the ID of the div from step 2.  
    adStatusCallbackFn: (status) => { // This is how you can listen for ad statuses (more in Step 4)  
      console.log("OUTSIDE Ad status: ", status);  
    },  
    adErrorCallbackFn: (error) => { // This is how you can listen for errors (more in Step 4)  
      console.log("Error: ", error.getError().data);  
    },  
  };
  var application = new Application(options);  
  window.onload = () => { // Important: Initialize on window load!!! (or use timeout)  
    application.initialize();  
    document.getElementById("start").addEventListener("click", () => {  
      application.openPlayer();  
    });
  };
</script>
```

--------------------------------

### Initialize and Open Player with initializeAndOpenPlayer Function

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/step-3-initializing-video-ad-360053982853

Use this function for a straightforward initialization and immediate opening of the video ad player. Ensure the Applixir script and necessary div element are included, and replace placeholder values with your actual API key and injection element ID. Define callback functions for ad status and error handling.

```javascript
<script type="text/javascript">  
  const options = {  
    apiKey: "xxxx-xxxx-xxxx-xxxx", // Replace with your actual API key  
    injectionElementId: "some-id" // This is the ID of the div from step 2.  
    adStatusCallbackFn: (status) => { // This is how you can listen for ad statuses (more in Step 4)  
      console.log("OUTSIDE Ad status: ", status);  
    },  
    adErrorCallbackFn: (error) => { // This is how you can listen for errors (more in Step 4)  
      console.log("Error: ", error.getError().data);  
    },  
  };
  document.getElementById("start").addEventListener("click", () => { // Or use any other event to trigger the player  
    initializeAndOpenPlayer(options);
  });
</script>
```

--------------------------------

### Initialize and Show Ad

Source: https://support.applixir.com/hc/article_attachments/11974265793815

Call this function after the SDK is loaded to initialize the ad player. Provide your API key and a callback function to handle ad completion and reward granting.

```javascript
initializeAndOpenPlayer({
 apiKey: "xxxx-xxxx-xxxx-xxxx",
 adStatusCallbackFn: (s) =>
 s === "ad-watched" && grantReward()
});
```

--------------------------------

### JavaScript Function to Get Error Details

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/local-callback-error-codes

This JavaScript snippet demonstrates how to access the `getError()` function from the Applixir player to retrieve detailed error information when an error occurs. It shows the structure of the returned object, including the error type, code, message, and any inner error details.

```javascript
{
  getError: () => {
    return {
      data: {
        type: 
          "adsRequestNetworkError" |
          "assetFallbackFailed" |
          "autoplayDisallowed" |
          "companionAdLoadingFailed" |
          "companionRequiredError" |
          "consentManagementProviderNotReady" |
          "failedToRequestAds" |
          "invalidAdTag" |
          "invalidArguments" |
          "nonlinearDimensionsError" |
          "overlayAdLoadingFailed" |
          "overlayAdPlayingFailed" |
          "protectedAudienceApiError" |
          "streamInitializationFailed" |
          "unknownAdResponse" |
          "unknownError" |
          "unsupportedUrl" |
          "vastAssetNotFound" |
          "vastEmptyResponse" |
          "vastLinearAssetMismatch" |
          "vastLoadTimeout" |
          "vastMalformedResponse" |
          "vastMediaLoadTimeout" |
          "vastNoAdsAfterWrapper" |
          "vastNonlinearAssetMismatch" |
          "vastProblemDisplayingMediaFile" |
          "vastSchemaValidationError" |
          "vastTooManyRedirects" |
          "vastTraffickingError" |
          "vastUnexpectedDurationError" |
          "vastUnexpectedLinearity" |
          "vastUnsupportedVersion" |
          "vastWrapperError" |
          "videoPlayError" |
          "vpaidError",
        errorCode: number,
        errorMessage: string,
        innerError: string,
      },
    };
  }
}
```

--------------------------------

### Initialize and Play Video Ad (v6 SDK)

Source: https://support.applixir.com/frequently-asked-questions/integration-questions/applixir-integration-faq-360053980273

Call this JavaScript function to initialize the AppLixir player and display a video ad. Use the `adStatusCallbackFn` to handle ad completion events and grant rewards.

```javascript
initializeAndOpenPlayer({
  apiKey: "xxxx-xxxx-xxxx-xxxx",
  adStatusCallbackFn: (status) => {
    if (status.type === "complete") grantReward();
  }
});
```

--------------------------------

### Initialize AppLixirAdPlayer

Source: https://support.applixir.com/applixir-integration/ios-app-integration/applixir-ads-ios-integration-360054041033

Initialize the AppLixirAdPlayer instance to begin using the SDK.

```swift
let adPlayer = AppLixirAdPlayer()
```

--------------------------------

### Configure Ad Options with User and Custom Data

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/overview-html-integration-360055393693

Set up ad options including API key, injection element, user ID, and custom session data. Use the adStatusCallbackFn to handle ad completion and trigger UI updates.

```javascript
const options = {
  apiKey: "xxxx-xxxx-xxxx-xxxx",
  injectionElementId: "applixir-ad-container",
  userId: "player-7890",
  customData: { sessionId, levelId },
  adStatusCallbackFn: (status) => {
    if (status.type === "complete") optimisticRewardUi();
  }
};
```

--------------------------------

### HTML5 Web SDK Integration

Source: https://support.applixir.com/download-samples-and-other-sdk-support-items

Integrate the v6 Web SDK directly from the CDN by including the script tag. Initialize the player with your API key and handle ad status callbacks.

```html
<div id="applixir-ad-container"></div>
<script src="https://cdn.applixir.com/applixir.app.v6.1.0.js"></script>
<script>
  initializeAndOpenPlayer({
    apiKey: "xxxx-xxxx-xxxx-xxxx",
    adStatusCallbackFn: (status) => {
      if (status.type === "complete") grantReward();
    }
  });
</script>
```

--------------------------------

### Include AppLixir JavaScript Library

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/step-2-adding-an-anchor-360053188754

Add this script tag to the body of your HTML file to load the AppLixir library. This is necessary for the Reward Video functionality to work.

```javascript
<script type="text/javascript" src="https://cdn.applixir.com/applixir.app.v6.1.0.js"></script>  
```

--------------------------------

### Preload Ad for Instant Reveal

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/overview-html-integration-360055393693

Preload an ad ahead of user interaction for a faster reveal time. The preloadAd function takes similar options to initializeAndOpenPlayer and returns a handle with a show method. Each handle is single-use; preloading must be called again after each show.

```javascript
const ad = await preloadAd({
  apiKey: "xxxx-xxxx-xxxx-xxxx",
  injectionElementId: "applixir-ad-container",
  adStatusCallbackFn: (status) => {
    if (status.type === "complete") grantReward();
  },
});

watchButton.addEventListener("click", () => ad.show());
```

--------------------------------

### Preload Ad for Instant Reveal

Source: https://support.applixir.com/frequently-asked-questions/best-practices-ad-serving/applixir-best-practices-360056835154

Use `preloadAd()` to pre-load an ad before the user clicks to watch. This prevents 'ad lag' and ensures an instant reveal. Enable the button only after an ad is confirmed ready.

```javascript
applixir.preloadAd();
// Enable button only when ad is ready
```

--------------------------------

### Lightweight HTML5/Web Integration

Source: https://support.applixir.com/frequently-asked-questions/best-practices-ad-serving/applixir-best-practices-360056835154

For HTML5 and web integrations, keep the AppLixir SDK integration lightweight. The v6 SDK is designed to be minimal.

```javascript
// The v6 SDK is three lines — don't over-wrap.
```

--------------------------------

### Handle No-Ad Gracefully

Source: https://support.applixir.com/frequently-asked-questions/best-practices-ad-serving/applixir-best-practices-360056835154

If `preloadAd()` does not return a ready ad within 2-3 seconds, hide the offer to prevent users from seeing a non-functional call-to-action.

```javascript
// If preloadAd() doesn't return a ready ad within 2-3 seconds,
hide the offer.
```

--------------------------------

### Load AppLixir SDK v6

Source: https://support.applixir.com/hc/article_attachments/11974265793815

Include this script tag in your HTML to load the AppLixir v6 SDK from their CDN. This makes the SDK functions available in your project.

```html
<script src="https://cdn.applixir.com/applixir.app.v6.1.0.js"> </script>
```

--------------------------------

### Passing Context to Web Callback

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/step-4-setting-up-local-callback-360053188774

Pass userId and customData in the player initialization options to include them in the web callback payload for reward attribution.

```javascript
window.invokeApplixirVideoUnit({
  appKey: "YOUR-API-KEY",
  userId: "player-7890",
  customData: { level: 12, sessionId: "abc-123" },
  // ... other options
});
```

--------------------------------

### Set AppLixir API Key

Source: https://support.applixir.com/applixir-integration/ios-app-integration/applixir-ads-ios-integration-360054041033

Set your unique AppLixir API key for ad playback.

```swift
adPlayer.setApiKey("Your API key")
```

--------------------------------

### Rewarded Video Ad Status Callback Function

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/overview-html-integration-360055393693

Implement this function to handle lifecycle events of the rewarded video ad. The reward should only be granted when the status type is 'complete'.

```javascript
adStatusCallbackFn: (status) => {
  if (status.type === "complete") {
    grantReward();
  }
}
```

--------------------------------

### HTML5 Ad Container

Source: https://support.applixir.com/hc/article_attachments/11974265793815

Add this div to your HTML to serve as the anchor for the ad player. Ensure it is present before loading the SDK.

```html
<div id="applixir-ad-container"></div>
```

--------------------------------

### Persistent 'Watch Ad' Button Keep-Alive Pattern

Source: https://support.applixir.com/applixir-integration/integration-for-html5-sites-apps/overview-html-integration-360055393693

This pattern keeps an ad preloaded for users who have a persistent 'Watch Ad' button visible. It refreshes the ad periodically to stay ahead of the bid TTL and also refreshes if the tab becomes visible after a period of inactivity. Includes a fallback to initialize the player directly if no ad handle is available.

```javascript
let adHandle = null;

let lastRefresh = 0;

async function refreshAd() {
  try {
    adHandle = await preloadAd(options);
    lastRefresh = Date.now();
  } catch (e) {
    adHandle = null;
  }
}

refreshAd(); // first render
setInterval(refreshAd, 4 * 60 * 1000); // stay ahead of TTL
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible"
      && Date.now() - lastRefresh > 60_000) refreshAd();
});

watchBtn.addEventListener("click", () => {
  if (adHandle) adHandle.show();
  else initializeAndOpenPlayer(options); // slow-path fallback
});
```

--------------------------------

### Preload Rewarded Video Ad

Source: https://support.applixir.com/frequently-asked-questions

Preload an ad before the user requests it to prevent lag. Enable the button only when the ad is ready. If the ad is not ready within a few seconds, hide the offer.

```javascript
preloadAd();
// Enable button only when ad is ready
// If not ready within 2-3 seconds, hide offer
```

--------------------------------

### Play AppLixir Ad

Source: https://support.applixir.com/applixir-integration/ios-app-integration/applixir-ads-ios-integration-360054041033

Play an ad using the AppLixir Ads SDK. Requires a UIViewController to present the ad.

```swift
adPlayer.playAd(from: self)
```

--------------------------------

### Insert Applixir Ad Shortcode

Source: https://support.applixir.com/applixir-integration/wordpress-integration/step-4-inserting-the-ad-11792673584791

Use this shortcode to insert the Applixir video ad into your WordPress page content. It is recommended to place it after some initial content to encourage user engagement.

```html
[insert-Applixir]
```

--------------------------------

### Add Applixir Ads SDK Dependency

Source: https://support.applixir.com/applixir-integration/android-app-integration/applixir-ads-android-sdk-5418083969687

Add this dependency to your app's build.gradle file to include the Applixir Ads SDK.

```gradle
dependencies {
    implementation("com.init.applixiradssdk:applixiradssdk:1.1.0")
}
```
Tokens:
Raw