Canvas

---

• Embed Placid SDK from CDN

Initializing the Placid Canvas

The Placid Canvas allows you to embed a interactive Placid Template directly into your application. This guide walks you through the steps:

Step 1: Embed the Placid SDK

To get started, you'll need to embed the Placid SDK in your HTML. This can be done by including the following script tag, sourced from Placid's CDN:

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

Step 2: Set Up the Canvas Container

Create a container in your HTML where the canvas will be rendered. For example:

<div id="canvas"></div>

Step 3: Initialize the Canvas

Now, you can initialize the Placid Canvas within the specified container. Use the following JavaScript to create an instance of the canvas:

const canvasInstance = EditorSDK.canvas.create(document.getElementById("canvas"), {
    access_token: "{ YOUR_JWT_TOKEN }",     // Replace with your JWT token
    template_uuid: "{ YOUR_TEMPLATE_UUID }", // Replace with your template UUID
});

{info} Make sure to replace { YOUR_JWT_TOKEN } with your actual JWT token and { YOUR_TEMPLATE_UUID } with the UUID of the template you wish to display.

Canvas Methods

Here's how you can utilize the methods of the canvas:

Example

const canvasInstance = /* Your canvas instance */;

canvasInstance.fillLayers({
    "layerText": {
        "text": "This is a text"
    },
    "layerImage": {
        "image": "https://urltoanimage.com/image.jpg"
    };
});

Available methods

Canvas Events

The SDK offers a range of events to listen to

const canvasInstance = /* Your canvas instance */;

canvasInstance.on('canvas:loaded', (canvasInstance) => {
    console.log('Canvas has loaded the current changes');
});

// - changing canvas content
canvasInstance.fillLayers(/**/);

Available options

Canvas Examples

Static Template Preview

HTML

<div id="canvas-example-static"></div>

Javascript

let canvasStatic = document.getElementById("canvas-example-static");

if (canvasStatic) {
    let accessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjIwMTI4MTIwNjIsImlhdCI6MTY5NzE5Mjg2Miwic2RrX3Rva2VuIjoicGxhY2lkLWZyaHNrcXh3enQ5b2xmc20taG1semtsYTAwZDkwYXZpNyIsInVzZXIiOm51bGwsInNjb3BlcyI6WyJ0ZW1wbGF0ZTo3cXJhNXFqc3U6cmVhZCJdLCJlZGl0b3Jfb3B0aW9ucyI6eyJlbmFibGVDYW52YXNSZXNpemluZyI6dHJ1ZSwiZW5hYmxlQ2FudmFzVHJhbnNwYXJlbmN5Ijp0cnVlLCJlbmFibGVUZW1wbGF0ZVJlbmFtaW5nIjp0cnVlLCJlbmFibGVCdXR0b25TYXZlIjp0cnVlLCJlbmFibGVCdXR0b25TYXZlQW5kQ2xvc2UiOmZhbHNlfSwidGVtcGxhdGVfb3B0aW9ucyI6W119.6lDAMcbPT-DqHRkJqe3u4zMUooWzRwrEwZLO21bIE7s";
    let templateUUID = "7qra5qjsu";

    const canvasInstance = EditorSDK.canvas.create(canvasStatic, {
        access_token: accessToken,
        template_uuid: templateUUID,
    });

    canvasInstance.fillLayers({
        title: {
            text: "This is a custom title",
        },
        img: {
            image:
                "https://placid-test.fra1.digitaloceanspaces.com/demo/realestate/unsplash_image_1.jpg",
        },
    });
}

Demo

Video Template Preview

HTML

<div id="canvas-example-animated"></div>

Javascript

let canvasAnimated = document.getElementById("canvas-example-animated");

if (canvasAnimated) {
    let accessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjIwMTI4MTIwNjIsImlhdCI6MTY5NzE5Mjg2Miwic2RrX3Rva2VuIjoicGxhY2lkLWZyaHNrcXh3enQ5b2xmc20taG1semtsYTAwZDkwYXZpNyIsInVzZXIiOm51bGwsInNjb3BlcyI6WyJ0ZW1wbGF0ZTo3cXJhNXFqc3U6cmVhZCJdLCJlZGl0b3Jfb3B0aW9ucyI6eyJlbmFibGVDYW52YXNSZXNpemluZyI6dHJ1ZSwiZW5hYmxlQ2FudmFzVHJhbnNwYXJlbmN5Ijp0cnVlLCJlbmFibGVUZW1wbGF0ZVJlbmFtaW5nIjp0cnVlLCJlbmFibGVCdXR0b25TYXZlIjp0cnVlLCJlbmFibGVCdXR0b25TYXZlQW5kQ2xvc2UiOmZhbHNlfSwidGVtcGxhdGVfb3B0aW9ucyI6W119.6lDAMcbPT-DqHRkJqe3u4zMUooWzRwrEwZLO21bIE7s";
    let templateUUID = "7qra5qjsu";

    const canvasInstance = EditorSDK.canvas.create(canvasAnimated, {
        access_token: accessToken,
        template_uuid: templateUUID,
        type: "animated"
    });

    canvasInstance.fillLayers({
        title: {
            text: "This is a custom title",
        }
    });
}

Demo

Interactive Template Example

HTML

<input onKeyUp="updateCanvasExampleInteractive()" type="text" id="canvas-example-interactive-input" placeholder="Enter your Title" />
<div id="canvas-example-interactive"></div>

Javascript

let canvasInteractive = document.getElementById("canvas-example-interactive");

if (canvasInteractive) {
    let accessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjIwMTI4MTIwNjIsImlhdCI6MTY5NzE5Mjg2Miwic2RrX3Rva2VuIjoicGxhY2lkLWZyaHNrcXh3enQ5b2xmc20taG1semtsYTAwZDkwYXZpNyIsInVzZXIiOm51bGwsInNjb3BlcyI6WyJ0ZW1wbGF0ZTo3cXJhNXFqc3U6cmVhZCJdLCJlZGl0b3Jfb3B0aW9ucyI6eyJlbmFibGVDYW52YXNSZXNpemluZyI6dHJ1ZSwiZW5hYmxlQ2FudmFzVHJhbnNwYXJlbmN5Ijp0cnVlLCJlbmFibGVUZW1wbGF0ZVJlbmFtaW5nIjp0cnVlLCJlbmFibGVCdXR0b25TYXZlIjp0cnVlLCJlbmFibGVCdXR0b25TYXZlQW5kQ2xvc2UiOmZhbHNlfSwidGVtcGxhdGVfb3B0aW9ucyI6W119.6lDAMcbPT-DqHRkJqe3u4zMUooWzRwrEwZLO21bIE7s";
    let templateUUID = "7qra5qjsu";

    const canvasInstance = EditorSDK.canvas.create(canvasInteractive, {
        access_token: accessToken,
        template_uuid: templateUUID,
    });

    // - update canvas on every input change
    updateCanvasExampleInteractive = () => {
        canvasInstance.fillLayers({
            title: {
                text: document.getElementById(
                    "canvas-example-interactive-input"
                ).value,
            },
        });
    };

}

Demo

Title: