@storyteq/platform-integration v1.0.2

Storyteq platform integration

Integrate with components of the Storyteq platform.

Development

Inside of src/test.ts you need to set up your TEST_API_KEY.

npm i
npm start

To change the platform url you need to edit window.APP_URL variable.

Usage

npm i @storyteq/platform-integration

import * as StoryteqPlatform from '@storyteq/platform-integration';

General usage

It's important to note that the iframe's dimensions are determined by the parent's dimensions, so usually you need to make sure there's always a height for #element-to-spawn-into.

Each page's instance provides the following methods;

on(event: String, callback: Function)

Depending on the context, the callback can contain different or no arguments.

destroy()

Destroy the currently active page instance.

Production usage

In order for the generated iframe to load correctly, your domains need to be whitelisted in our Content-Security-Policy headers. Please share your testing and production domains with us, so we can add them as allowed frame-ancestors.

Available pages

Create media form

Usage example

const createMediaPage = new StoryteqPlatform.createMediaPage(
  '#element-to-spawn-into',
  'AUTH_TOKEN',
  1000, // template ID,
  {
    assetManagerScope: [], // Scope the asset selection to a set of asset providers
    notifications: [ {} ], // Will send a notification to the target route upon media status change with the full media object
    publish: [ {} ], // Upon rendering completion, publish to this channel
  },
);

createMediaPage
  .on('loaded', () => console.log('loaded'))
  .on('created', (media) => {
    console.log({ media });
  });
  .on('batch-created', (batch) => {
    console.log({ batch });
  });

CRM Analytics page

Usage example

const crmAnalyticsPage = new StoryteqPlatform.crmAnalyticsPage(
  '#element-to-spawn-into',
  'AUTH_TOKEN',
  1000, // template ID,
  1000, // campaign ID,
);

crmAnalyticsPage
  .on('loaded', () => console.log('loaded'));

Create Media form Advanced Configuration Options / UI customization

The integration supports additional configuration options that allows you to customize the media creation UI/UX.

Advanced Configuration Example

const createMediaPage = new StoryteqPlatform.createMediaPage(
  '#element-to-spawn-into',
  'AUTH_TOKEN',
  1000, // template ID,
  {
    assetManagerScope: [], // Scope the asset selection to a set of asset providers
    notifications: [
        {
            type: 'webhook',
            route: 'https://my-webhook-site.com'
        }
    ],
    publish: [ {} ], // Upon rendering completion, publish to this channel
    mediaRecreateHash: '11abcaaaa0abcdabcabcabca49abx321',
    // creationType: 'batch', // if left empty, it will default to single media create form
    ui: {
        forceMediaPreviewBeforeCreate: 'always',
        customizationItems: [
            {
              item: 'host_product_name',
              value: 'Storyteq',
            },
            {
              item: 'media_alias',
              value: 'Media',
            },
            {
              item: 'button_media_create',
              value: 'Publish',
            },
            {
              item: 'end_screen_title',
              value: 'Your asset is being published.',
            },
            {
              item: 'end_screen_subtitle',
              value: 'Your asset will appear in your personal assets when finished.',
            },
           {
              item: 'color_theme_hex',
              value: '#999999'
           },
           {
              item: 'full_screen',
              value: true
          }
        ],
        endScreenActions: [
            {
              action: 'create_another_media',
              value: 'Create Another Media',
            },
        ],
    },
  },
);

createMediaPage
  .on('loaded', () => console.log('loaded'))
  .on('created', (media) => {
    console.log({ media });
  });
  .on('batch-created', (batch) => {
    console.log({ batch });
  });

General configuration Attributes

mediaRecreateHash

\ By setting the value of mediaRecreateHash to a media hash, all parameter values that was used to create this media will be directly applied in the media create form.

notifications

\ Optional parameter. An array of objects containing two string keys: type and route. type should be set to 'webhook', while route is the webhook url. When set, each time a media/creative has it's rendering status updated, the media body will be send to the webhook. Example:

    notifications: [
        {
            type: 'webhook',
            route: 'https://my-webhook-site.com'
        }
    ],

creationType

\ Optional parameter. Leaving it empty will result in spwaning the single media creation form. But by setting creationType to the string value batch, you will instead spawn the batch creation form. This form allows you to create several media in one go.

UI Configuration Attributes

forceMediaPreviewBeforeCreate

\ For after effects template, forceMediaPreviewBeforeCreate allows you to enforce the creation of a 'rich preview' before action creation/publishing can be made.

customizationItems

\ customizationItems is an array of configuration objects which allow you to customize the general UI. \ Possible configurations:

endScreenActions

\ endScreenActions is an array of configuration objects that allows you to customize the UI of the 'end screen', by adding certain actions. The end screen is what appears after you have initiated the creation/publishing of a media or media batch. \ Possible configurations: