# Voice Ads SDK (Mobile web)

### **Embedding**

Download the SDK from [HERE](https://instreamatic.com/static/js/xman.min.js)

{% hint style="warning" %}
It is required to add the script *xman.min.js* on a page to embed. 

Please note that our SDK is built for Google Chrome browser on Android OS mobile devices.
{% endhint %}

#### Integration Example:

```javascript
<script type="text/javascript" src="xman.min.js"></script>
<script type="text/javascript">
   new AdMan.Manager({
     playerId: "<Player id>",
     playerType: "<Player type>",
     country: "Server_name",
     admanId: "Advertising identifier",
     voice: {
       mobile: true
     }  
     protocol: "https://",
   });
</script>
```

AdMan ID should be sent as an object with the following attributes:

* siteID - Site ID (Required, must be supplied by support team)
* playerID - player ID for corresponding site (optional)

#### Usage Example:

```javascript
new AdMan.Manager({
    ...
    country: "GLOBAL",
    admanId: 1981,
    protocol: "https://",
		voice: {
       mobile: true
     } 
    ...
});
```

We use 1981 for testing purposes only.\
The value for a country will be different for different publishers.&#x20;

{% hint style="danger" %}
Please ask our representatives for your value. Please, do not change the value during the initial integration.
{% endhint %}

### Supported Players:

The list of players supported by default:

* [AdMan.PlayerType.TAG\_AUDIO](http://www.w3schools.com/tags/tag_audio.asp)
* [AdMan.PlayerType.JPLAYER](http://jplayer.org/)
* [AdMan.PlayerType.JWPLAYER\_5](https://github.com/thetutlage/jwplayer-5)
* [AdMan.PlayerType.JWPLAYER\_6](http://www.jwplayer.com/)

You can use the SDK with any other player.&#x20;

Please contact us at <support@instreamatic.com> in case of issues and we will do our best to troubleshoot.&#x20;

#### Usage Example:

```javascript
new AdMan.Manager({
   ...
   playerId: "jquery_jplayer_1",
   playerType: AdMan.PlayerType.JPLAYER,
   country: "GLOBAL",
   admanId: 1981,
   protocol: "https://",
	 voice: {
       mobile: true
     } 
   ...
 });
```

### Displaying a banner

To display a banner the parameter *banner* is used, which defines the element to embed a banner and its dimensions.

#### Usage Example:

```javascript
<script type="text/javascript">
   new AdMan.Manager({
     ...
     banner: {
       id: "banner_container",
       width: 640,
       height: 640
     }
     ...
   });
 </script>
```

It is possible to set up a banner more precisely via the overlay system.

### Overlay system

The script allows the display of a banner and an ad data via the overlay system. The overlay parameter receives an array of elements with the following fields:

| Field            | Description                                                |
| ---------------- | ---------------------------------------------------------- |
| <p></p><p>id</p> | <p></p><p>an overlay id</p>                                |
| target           | a jQuery selector of the element to embed the overlay into |
| mode             | overlay embedding mode                                     |

#### Possible overlay modes

| Name                       | Description                                           |
| -------------------------- | ----------------------------------------------------- |
| AdMan.Overlay.Mode.REPLACE | the overlay replaces the element                      |
| AdMan.Overlay.Mode.BEFORE  | the overlay is embedded before the element            |
| AdMan.Overlay.Mode.AFTER   | the overlay is embedded after the element             |
| AdMan.Overlay.Mode.PREPEND | the overlay is embedded into beginning of the element |
| AdMan.Overlay.Mode.APPEND  | the overlay is embedded into the end of the element   |

#### Overlay Animation

| Name                          | Description |
| ----------------------------- | ----------- |
| AdMan.Overlay.Animate.OPACITY |             |
| AdMan.Overlay.Animate.SLIDE   |             |
| AdMan.Overlay.Animate.BLUR    |             |

#### Overlay Parameters

| Name    | Description                                                                |
| ------- | -------------------------------------------------------------------------- |
| default |                                                                            |
| content | HTML code of an overlay                                                    |
| src     | URL to overlay content                                                     |
| showOn  | an array of events initializing overlay showing, by default \["adStarted"] |
| closeOn | an array of events initializing overlay hiding, by default \[]             |

#### Classes of overlay elements

| Class name          | Description                                                                                                                                                                                                                        |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| instreamatic-banner | a banner is added to the element                                                                                                                                                                                                   |
| b\[width]x\[height] | <p>is used with instreamatic-banner and allows the choice from the  following banner dimensions:</p><p> </p><p>b728x90</p><p>b468x60</p><p>b300x250</p><p>b240x400</p><p>b200x300</p><p>b160x160</p><p>b128x128</p><p>b640x640</p> |
| instreamatic-left   | playback remaining time is set to the element                                                                                                                                                                                      |
| instreamatic-close  | the element is used to close the overlay, the attribute "data-delay" is used to set the time after which the element will be disabled in seconds                                                                                   |

#### Usage Example:

```javascript
new AdMan.Manager({
    ...
    overlay: [
      //banner
      {
        target: ".a1"
        showOn: ["adStarted"], closeOn: [],
        mode: AdMan.Overlay.Mode.REPLACE,
        animate: AdMan.Overlay.Mode.OPACITY,
        content:
          "<div>" +
            "<div class='instreamatic-banner b640x640'></div>" +
            "<div class='instreamatic-close' data-delay='10'></div>" +
          "</div>"
      
      
    ...
  });
```

### Ad Events

The following events can be generated:

| Event Name  | Description                 |
| ----------- | --------------------------- |
| adLoad      | an ad request is sent       |
| adNone      | there is no ad for the user |
| adReady     | the ad is ready to play     |
| adStarted   | the ad playback is started  |
| adCompleted | the ad playback is finished |

#### Usage Example:

```javascript
new AdMan.Manager({
   ...
   events: {
     adLoad: function() {},
     adReady: function(section) {},
     adStarted: function() {},
     adCompleted: function() {},
     adNone: function() {}
   }
   ...
 });
```

#### Ad Playback

You can initiate playback by calling the **start()** method of AdManager. Please see the example below:

```javascript
<button class="play_button">Play<button>
  <div id="banner_container"><div>
  <script type="text/javascript" src="xman.min.js"></script>
  <script type="text/javascript">
   var adman = new AdMan.Manager({
   country: "GLOBAL",
   admanId: 1981,
   protocol: "https://",
	 voice: {
       mobile: true
     }, 
      banner: {
        id: "banner_container",
        width: 728,
        height: 90
      },
      events: {
        adNone: function() {
          // start player
          // $("#player").play();
        },
        adCompleted: function() {
          // start player
          // $("#player").play();
        }
      }
    });
  $(".play_button").click(function() {
      adman.start();
    });
  </script>
```

If you need help with integration, please send us the link to the page with your player to <support@instreamatic.com> . Our team will take a look at the player and will do their best to set up the SDK.

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.instreamatic.com/web-sdk/web-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.