# Embedded Widget
## Integration
The editor is embedded in the host app as an iframe:
```
```
embeddedEditorURL can be retrieved from the [administrative API](https://admin-api-docs.adrapid.com/#/users/get_users__userId__access)
## 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. |
{% tabs %}
{% tab title="200 URLs to create an embedded editor inside an iframe" %}
```
{
"editorURL": "uri",
"embeddedEditorURL": "uri"
}
```
{% endtab %}
{% endtabs %}
###
## Widget communication
The widget can communicate with its container when is set inside an iframe through [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
### Messages structure
```
interface EditorMessage {
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.
```typescript
{
...
type: "item:animation:added",
data: {e
animation: Animation,
keyframe: Keyframe
}
...
}
```
**item:animation:removed**
Fires when an animation is removed from an item.
```typescript
{
...
type: "item:animation:removed",
data: {
animation: Animation,
keyframe: Keyframe
}
...
}
```
**animation:keyframe:added**
Fires when a keyframe is added to an animation.
```typescript
{
...
type: "animation:keyframe:added",
data: {
animation: Animation,
keyframe: Keyframe
}
...
}
```
**animation:keyframe:removed**
Fires when a keyframe is removed from an animation.
```typescript
{
...
type: "animation:keyframe:removed",
data: {
animation: Animation,
keyframe: Keyframe
}
...
}
```
Fires when a keyframe is updated.
```typescript
{
...
type: "keyframe:updated",
data: {
[key]: value
}
...
}
```
**template:duration:updated**
Fires when template duration is updated.
```typescript
{
...
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.
```typescript
{
...
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'
}
}
}
```