Embedded Widget

Use a banner creation tool inside your own app

Integration

The editor is embedded in the host app as an iframe:

<iframe src="embeddedEditorURL"></iframe>

embeddedEditorURL can be retrieved from the administrative API

Get User Access URL

GET https://api.adrapid.com/v1/api/users/:userId/access/

This methods gets an URL to login a user into Adrapid system and a URL to create an embedded editor in a iframe tag.

Path Parameters

Name	Type	Description
:userId	string	Id of the user

Query Parameters

Name	Type	Description
template_id	string	Template id to open in the editor. If not set a template selector interface will be show with the user templates
options	json	Editor customizations.

200 URLs to create an embedded editor inside an iframe

{
    "editorURL": "uri",
    "embeddedEditorURL": "uri"
}

Widget communication

The widget can communicate with its container when is set inside an iframe through postMessage

Messages structure

interface EditorMessage<T> {
  type: 'item:updated' | 'template:loaded' | 'template:size:selected'; // type of the message
  templateId?: string; // Only for output messages. Id of the open template
  sizeId?: string; // Only for output messages. Id of the selected size
  itemId?: string; // Id of the affected item
  data: T; // payload 
}

Output messages

List of messages that the editor will send.

template:loaded

message: EditorMessage<{items: TrackItem[]}> {
  type: 'template:loaded',
  templateId: 'templateId',
  sizeId?: 'size id',
  itemId?: 'item id',
  data: {
    items: TrackItem[]
  }
}

interface TrackItem {
  id: string;
  name: string;
  text: string;
  type:'img'|'text'|'icon'|'video';
  url: 'http://static.adrapid.se/medias/46083883-3310-4c45-898d-00da5c78433c/bafdc971-8755-48b6-9c9d-54e30dd460e0/bafdc971-8755-48b6-9c9d-54e30dd460e0.png'
  ...
}

item:updated

Example messages with different updates:

Updated text

message: EditorMessage {
  type: 'item:updated',
  templateId: 'templateId',
  sizeId: null,
  itemId: 'itemId',
  data: {
    text: 'new text'
  }
}

Updated item name

message: EditorMessage {
  type: 'item:updated',
  templateId: 'templateId',
  itemId: 'itemId',
  data: {
    name: 'new name'
  }
}

Update item media (image)

message: EditorMessage {
  type: 'item:updated',
  templateId: 'templateId',
  sizeId: null,
  itemId: 'itemId',
  data: {
  type: 'item:updated',
  templateId: 'templateId',
  sizeId: null,
  itemId: 'itemId,
  data: {
    media: {
      id: "bafdc971-8755-48b6-9c9d-54e30dd460e0"
      createdAt: "2020-12-10T10:28:39.987Z"
      height: 250
      width: 300
      meanColor: 154
      mimeType: "image/png"
      name: "mediaitemname.png"
      ownerId: "46083883-3310-4c45-898d-00da5c78433c"
      size: 9546
      type: "image"
      updatedAt: "2020-12-10T10:28:40.705Z"
      url: "http://static.adrapid.se/medias/46083883-3310-4c45-898d-00da5c78433c/bafdc971-8755-48b6-9c9d-54e30dd460e0/bafdc971-8755-48b6-9c9d-54e30dd460e0.png"
      ...
    }
  }
}

Updated item position

message: EditorMessage {
  type: 'item:updated',
  templateId: 'templateId',
  itemId: 'itemId',
  data:{
    "width": "67.3333%",
    "height": "59.2%",
    "transform": {
        "rotateZ": -19.201756154044205
    },
    "top": "35.6%",
    "left": "35%"
    }
}

Updated property

message: EditorMessage {
  type: 'item:updated',
  templateId: 'templateId',
  itemId: 'itemId',
  data:{
    "fontWeight": "bold"
  }
}

template:size:selected

message: EditorMessage {
  templateId: "0a3a1338-5976-43be-a851-6dcb9d105f02",
  sizeId: "4520116f-d33f-4728-a7bc-e6b7b247a565",
  type: "template:size:selected",
  size: {
    templateId: "0a3a1338-5976-43be-a851-6dcb9d105f02",
    width: 320,
    height: 320,
    id: "4520116f-d33f-4728-a7bc-e6b7b247a565",
    name: "320x320",
    templateData: {
      'textElementId': { 
        text: 'new product'
      }, 
      'imageElementid': {
        references: {
          url: "3b486b95-176f-4630-a000-2c9c1e27150a"
        },
        ...
      },
      ...
    }
  }
}

template:items:updated

Same structure as template:loadded but fired when a item is added or removed from the template example message

message: EditorMessage<{items: TrackItem[]}> {
  type: 'template:loaded',
  templateId: 'templateId',
  sizeId?: 'size id',
  itemId?: 'item id',
  data: {
    items: TrackItem[]
  }
}

Timeline messages

Messages related user interaction with the timeline.

item:animation:added

Fires when an animation is added to an item.

{
  ...
  type: "item:animation:added",
  data: {e
    animation: Animation,
    keyframe: Keyframe
  }
  ...
}

item:animation:removed

Fires when an animation is removed from an item.

{
  ...
  type: "item:animation:removed",
  data: {
    animation: Animation,
    keyframe: Keyframe
  }
  ...
}

animation:keyframe:added

Fires when a keyframe is added to an animation.

{
  ...
  type: "animation:keyframe:added",
  data: {
    animation: Animation,
    keyframe: Keyframe
  }
  ...
}

animation:keyframe:removed

Fires when a keyframe is removed from an animation.

{
  ...
  type: "animation:keyframe:removed",
  data: {
    animation: Animation,
    keyframe: Keyframe
  }
  ...
}

Fires when a keyframe is updated.

{
  ...
  type: "keyframe:updated",
  data: {
    [key]: value
  }
  ...
}

template:duration:updated

Fires when template duration is updated.

{
  ...
  type: "template:duration:updated",
  data: {
    duration: number
  }
  ...
}

template:indexes:updated

Fires when item indexes are updated. Data contains an array with the new order of items in the timeline.

{
  ...
  type: "template:indexes:updated",
  itemId: string,
  data: {
    indexesMap: [item1, item2]
  }
  ...
}

Groups messages

Messages regarding group items.

template:item:group

Fires when a new group is created.

message: EditorMessage<{items: TrackItem[]}> {
  type: 'template:item:group',
  templateId: 'templateId',
  sizeId?: 'size id',
  itemId: 'item id',
  data: {
    childItems: TrackItem,
    item: TrackItem
  }
}

template:item:ungroup

Fires when and item is ungrouped.

message: EditorMessage<{items: TrackItem[]}> {
  type: 'template:item:group',
  templateId: 'templateId',
  sizeId?: 'size id',
  itemId: 'item id',
  data: {
    item: TrackItem
  }
}

template:item:detach

Fires when a single item is removed from its current group.

message: EditorMessage<{items: TrackItem[]}> {
  type: 'template:item:group',
  templateId: 'templateId',
  sizeId?: 'size id',
  itemId: 'item id',
  data: {
    item: TrackItem
  }
}

Input messages

With inputs messages you can edit some values of the template from the parent container. This actions will add an do/redo action in the editor and will be saved in the template.

Updating text

const message: EditorMessage = {
  type: 'item:updated',
  itemId: 'itemId',
  data: {
    text: 'new text'
  }
}

iframeElement.contentWindow.postMessage(message, '*');

Update image

const message: EditorMessage = {
  type: 'item:updated',
  itemId: 'itemId',
  data: {
    mediaId: 'media id'
  }
}
iframeElement.contentWindow.postMessage(message, '*');

Update css property

const message: EditorMessage = {
  type: 'item:updated',
  itemId: 'itemId',
  data: {
    css: {
      property: 'color',
      value: 'blue'
    }
  }
}