# Embedded Widget ![](/files/-MhYIN_VNXMbG1WuXvhw) ## 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' } } } ``` --- # 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://docs.adrapid.com/enterprise/whitelabel/widget.md?ask= ``` 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.