Vanilla content-editable div example

This example assumes you have a Deepdesk account and the webhook and SSO are configured.

Html example:

html

<form id="form">
  <div contenteditable="true" id="input"></div>
  <button type="submit">Submit</button>
</form>

Javascript example:

import "@deepdesk/deepdesk-sdk/styles";
import { DeepdeskSDK, updateContentEditable } from "@deepdesk/deepdesk-sdk";

const formElement = document.getElementById("form");
const inputElement = document.getElementById("input");
const deepdeskSDK = new DeepdeskSDK({
    deepdeskUrl: "https://<accountname>.deepdesk.com",
});

const isSupported = await deepdeskSDK.isConversationSupported("123", {
    attempts: 5,
    retryDelay: 500,
});

if (!isSupported) return;

deepdeskSDK.mount(inputElement);

deepdeskSDK.login().then(async () => {
    // Get conversation by platform caseId/conversationId/sessionId
    deepdeskSDK.getConversationBySessionId("123");

    deepdeskSDK.setVisitorInfo({
        visitorName: "Anne",
    });

    deepdeskSDK.setAgentInfo({
        agentName: "Sam de Pam",
        agentNickname: "Sam",
    });

    deepdeskSDK.on("select-suggestion", ({ text, replace }) => {
        updateContentEditable(inputElement, text, {
            replace,
        });
    });

    deepdeskSDK.on("replace", ({ text, replace }) => {
        updateContentEditable(textareaEl, text, {
            replace,
        });
    });

    deepdeskSDK.on("reset", ({ text, selectionAfter }) => {
        updateContentEditable(textareaEl, text, {
            selectionAfter,
        });
    });

    formElement.addEventListener("submit", async (event) => {
        await sendMessageToYourBackend(); // Handle your platform submit logic ...

        deepdeskSDK.notifySubmit({ sentText: inputElement.value });
        inputElement.value = "";

        await deepdeskSDK.refresh();
    });
});

Vanilla content-editable div example ​

Vanilla content-editable div example