Video Intelligence (vi)

• Getting Started With vi
• vi App Methods
• vi Ad Parameters
• vi Ad Methods & Properties
• vi Ad Events
• Examples

Video Intelligence component that built into Framework7 allows you to easily add video advertising to your Framework7 app, straight out-of-the-box.

vi's interstitial ads can be placed into your app experience at your discretion, showing full screen video ads. Advertisers pay a premium for these ad slots, and they will be directly connected to your app; you'll be able to monetise straight away.

Getting Started With vi

1. Sign up for Framework7 vi publisher account

First of all as a mobile publisher you need to create vi publisher account. To signup for Framework7 vi account go to vi.framework7.io and fill up the following form:

2. Setup your app at vi

After successful registration you will receive instructions with vi dashboard link and temporary password to the specified email.

When you log in to your vi dashboard you will see a list of your apps. If you don’t have apps create new one:

When you already have an app, you need to add placement for this app:

When you create place choose Placement Type: "Video Interstitial"

Ok, after we have placement created we need placement ID, choose just created placement:

Click “copy” near the placement id string to copy id to the clipboard

3. Configure vi in Framework7 app

After we set the things up at vi dashboard we will have:

• App bundle id (e.g. io.framework7.testapp)
• Placement id (e.g. pltd4o7ibb9rc653x14)

Now when we have our vi placement id we may set it up in Framework7 on the app initialization:

var app = new Framework7({
  /*
    common app bundle id must match the one
    you have specified when created app in vi dashboard:
  */
  id: 'io.framework7.testapp',

  /* add vi placement id under the vi module parameters */
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  },
});

4. Show Ad

That is all, now we can use Framework7’s vi API to create and show ads. In simplest way just call the following method when you need to show an ad:

app.vi.createAd();

vi App Methods

Let's look at available vi app methods and properties:

vi Ad Parameters

Let's look at list of all available parameters when we create vi ad:

var viAd = app.vi.createAd({
  on: {
    stopped: function () {
      console.log('Ad video stopped')
    }
  }
})

var app = new Framework7({
  /*
    common app bundle id must match the one
    you have specified when created app in vi dashboard:
  */
  id: 'io.framework7.testapp',

  /* global vi parameters */
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  }
});

var viAd = app.vi.createAd({
  // disable autoplay for this ad
  autoplay: false,
})

vi Ad Methods & Properties

So to create vi ad we have to call:

var viAd = app.vi.create({ /* parameters */ })

After that we have its initialized instance (like viAd variable in example above) with useful methods and properties:

vi Ad Events

vi ad will fire the following events on vi ad instance:

App Events

vi component also fires events on app instance:

var app = new Framework7({
  id: 'io.framework7.testapp',
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  }
});

var $$ = Dom7;

// Create prepaire ad
var prepairedAd;
if (!app.vi.sdkReady) {
  app.on('viSdkReady', function () {
    prepairedAd = app.vi.createAd({
      autoplay: false,
    });
  })
} else {
  prepairedAd = app.vi.createAd({
    autoplay: false,
  });
}

// Show prepaired ad
$$('.show-prepaired').on('click', function () {
  prepairedAd.start();
});

// Create and show ad
$$('.create-and-show').on('click', function () {
  app.vi.createAd();
});

// With custom autplay fallback
$$('.create-and-show-with-custom-callback').on('click', function () {
  app.vi.createAd({
    fallbackOverlay: false,
    on: {
      autoplayFailed: function() {
        const ad = this;
        app.dialog.alert('Check out this awesome ad', () => {
          ad.start();
        })
      }
    }
  });
});

// Create and show rewarded ad
$$('.create-and-show-rewarded').on('click', function () {
  app.vi.createAd({
    autoplay: false,
    on: {
      ready: function() {
        const ad = this;
        app.dialog.alert('Check out this awesome ad to get the reward', () => {
          ad.start();
        })
      },
      complete: function() {
        app.dialog.alert('Congrats! You got the reward!')
      },
      userexit: function() {
        app.dialog.alert('Sorry, no reward for you!')
      },
    }
  });
});