Video Intelligence (vi)

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.

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 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. )
• Placement id (e.g. pltd4o7ibb9rc653x14)

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

4. Show Ad

app.vi.createAd();

vi App Methods

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

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

All parameters can be used in global app parameters under vi property to set defaults for all vi ads. For example:

var app = new Framework7({
  /*
    common app bundle id must match the one
  */
  id: 'io.framework7.testapp',
  /* global vi parameters */
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  }
});

In this case when we create vi ad, we need to pass parameters that we want to override:

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 will fire the following events on vi ad instance:

App Events

vi component also fires events on app instance:

Examples