🤔 Why?

This SDK provides functionality that help simplify the creation of SIMID creatives through the Vynce platform.

Note The SDK is designed to work with VAST documents served through Vynce. However some functionality is generic to SIMID creatives and could be used standalone at your own risk.

• An abstraction on top of the SIMID implementation to handle communication between the player and creative.

🚀 Usage

npm install @vynce/simid

The simplest way to start using the SDK is by initialising it in a Javascript file that is loaded through a SIMID-compatible video player.

import { init } from "@vynce/simid";

init();

The init function will automatically create the SIMID session and handle communication with the player.

Integrations

The SDK makes use of several integrations to help take care of common behaviours. Some of these are loaded automatically while others are opt-in.

AlpineIntegration

The Alpine.js integration allows you to render your creative using Alpine.js and access the creative's state.

import Alpine from "alpinejs";
import { init, AlpineIntegration } from "@vynce/simid";

init({
  integrations: [new AlpineIntegration()],
});

Alpine.start();

Then in your HTML you can use regular Alpine.js syntax to access the attributes and content areas:

<div x-data="creative">
  <span x-text="getAttributeValue('language')"></span>
</div>

Using Content Areas

Using directive

The easiest way to render a content area is by using the x-vynce-content-area directive. This directive will take care of rendering the HTML specific to the content area's type.

<div x-vynce-content-area="title"></div>

Using custom bindings

If you want more control over how and what should be rendered for a content area then you can make use of the getContentArea method to find the values. You can use the isContentAreaShown method to determine if a content area should be displayed.

<div class="absolute left-[5%] top-[5%] z-30">
  <template x-if="isContentAreaShown('title')">
    <div x-text="getContentArea('title')?.value.text"></div>
  </template>
</div>

Customizing the Alpine component

If you want to customize the Alpine component that is used by the SDK then you can do so by passing in a custom component to the AlpineIntegration constructor. This could be useful in cases where you want to add custom methods or state to the component to, for example, format a message based on the current locale.

init({
  integrations: [new AlpineIntegration({
    init() {
      // Custom init code
    }
    
    // Methods / state to support your creative.
  })],
});

Examples

Refer to the example creatives to see how to use this library.