Advanced Website Usage Guide

              
              <iframe
  class="livedesk-widget-iframe"
  src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart"
  title="LiveDesk"
  allow="camera;microphone"
/>

            

              
              Array.from(document.getElementsByTagName('iframe'))
  .filter((iframe) => iframe.src && iframe.src.includes('livedesk'))
  .forEach((iframe) =>
    iframe.contentWindow?.postMessage(
      'livedesk-widget:' +
        JSON.stringify({
          event: 'set-user',
          identifier: 'your_user_id',
          user: { name: 'Display name', email: 'user@example.com' },
        }),
      '*',
    ),
  );

            

              
              <iframe
  class="livedesk-widget-iframe"
  src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002"
  title="LiveDesk"
  allow="camera;microphone"
/>

            

              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setUserId("Unique user ID (such as user_id)", {
    // The first parameter is the unique identifier
    email: "user@example.com",
    name: "User name",
    avatar_url: "https://example.com/avatar.jpg", // Optional
    phone_number: "+1234567890", // Optional
  });
});

            

              
              const crypto = require("crypto");
const key = "Your HMAC Token"; // Copy from Inboxes settings
const message = "Unique user ID";
const identifier_hash = crypto
  .createHmac("sha256", key)
  .update(message)
  .digest("hex");

// Append to setUser
window.$livedesk.setUserId("Unique user ID", {
  ...OtherInformation,
  identifier_hash: identifier_hash,
});

            

              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google", // Example: conversation-level UTM
  session_type: "support",
});

            

              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setCustomAttributes({
    pricing_plan: "premium", // Key: predefined unique identifier; value: set according to the type, such as a string
    signup_date: new Date(), // Example: date type
    account_id: 123, // Example: number type
  });
});

            

              
              window.$livedesk.deleteCustomAttribute("pricing_plan"); // String attribute key

            

              
              window.$livedesk.toggle();

// Toggle the widget by passing a state
window.$livedesk.toggle("open"); // Open the chat widget
window.$livedesk.toggle("close"); // Close the chat widget

            

              
              window.$livedesk.toggleBubbleVisibility("hide"); // Show or hide

            

              
              window.$livedesk.popoutChatWindow();

            

              
              window.$livedesk.setLocale("en"); // String language code, such as zh-CN

            

              
              window.$livedesk.setLabel("support-ticket"); // String label identifier
window.$livedesk.removeLabel("support-ticket");

            

              
              <script>
  // 1. Set the global configuration before loading sdk.js.
  // This must be placed at the beginning of the script.
  window.livedeskSettings = {
    // Widget position: bottom-left (bottom-right by default)
    position: "left",

    // Force Simplified Chinese (Chinese will be displayed even if the browser is set to English)
    locale: "zh-CN",

    // Automatically detect the browser language. If you want to prioritize
    // the user's browser language, set this to true and delete the locale above.
    // useBrowserLanguage: true,

    // Widget type: expanded_bubble = large bubble with a welcome message;
    // standard = classic small bubble
    type: "expanded_bubble",

    // Dark mode (automatically follow the system setting or force dark mode)
    darkMode: "auto", // Optional values: true | false | "auto"

    // Hide the small bubble icon at the bottom (suitable for use with a custom button)
    hideMessageBubble: false,

    // Hide the pop-up window arrow button in the bottom-right corner
    showPopoutButton: false,

    // Custom launcher title (displayed in expanded_bubble mode)
    launcherTitle: "Online Support",

    // Welcome message (effective in expanded_bubble mode)
    welcomeTitle: "Hello! How can we help you?",
    welcomeDescription: "We usually reply within a few minutes.",

    // Prompt text displayed when online or offline
    availableMessage: "We are online and ready to help",
    unavailableMessage:
      "We are currently offline and will reply as soon as possible during business hours",

    // Feature toggles
    enableFileUpload: true, // Allow file uploads
    enableEmojiPicker: true, // Allow emojis
    enableEndConversation: true, // Allow users to end the conversation themselves

    // Other advanced options (enable as needed)
    // showUnreadMessagesDialog: true, // Show a reminder dialog when there are unread messages (true by default)
    // baseDomain: "yourcompany.com", // Use for multi-domain deployments
  };
</script>

<!-- 2. Load the LiveDesk Widget SDK (replace with your own domain and token) -->
<script>
  (function (d, t) {
    var BASE_URL = "https://www.engagelab.com"; // Change to your LiveDesk address
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];

    g.src = BASE_URL + "/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);

    g.onload = function () {
      window.livedeskSDK.run({
        websiteToken: "abcdefgh1234567890abcdefgh123456", // Change to your Website Token
        baseUrl: BASE_URL,
      });
    };
  })(document, "script");
</script>