Integration

• Embed Placid SDK from CDN
• Placid Editor
• Placid Canvas
• Placid Button

Embed Placid SDK from CDN

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

Initialize Editor

The Placid Editor component delivers a customizable editing experience of your templates right in your app.

<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

Initialize Canvas

The Placid Canvas displays a responsive, dynamic preview of your templates.

<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

Initialize Button

The Placid Button offers an all-in-one editor implementation including a template preview and edit button.

<placid-button with-preview access-token="..." template-uuid="{{UUID}}" />

Demo

With Preview

Without Preview