Integration


Embed Placid SDK from CDN

<script src="https://sdk.placid.app/placid-editor-sdk@latest/placid-sdk.js"></script>

Initialize Editor

<placid-editor access-token="..." template-uuid="{{UUID}}" />
// - Get the Editor element
const placidEditor = document.querySelector("placid-editor")

// - To initialize the editor call `openEditor()` on the editor element
placidEditor.openEditor()

Demo

View demo component

Initialize Canvas

A <placid-canvas/> needs an access-token and template-uuid and will display a responsive view of your template.

<placid-canvas access-token="..." template-uuid="{{UUID}}" />
// - Get the Canvas element
const placidCanvas = document.querySelector("placid-editor")

// - Fill Canvas with custom data
placidCanvas.setLayerValues({
    "img": {
        "image": "https://imageurl.jpg"
    },
    "subtitle": {
        "hide": true
    },
    "title": {
        "text": "Lorem Ipsum"
    }
})

{info} setLayerValues can be filled in the same structure as our REST Api calls

Demo