Skip to main content

Peki Chatbot Integration Guide

This guide explains how to integrate the Peki chatbot into your website using our JavaScript SDK.

Installation​

Add the Peki script to your HTML file. There are two integration methods depending on your use case:

Guest User Integration​

For anonymous users, add the following script to your HTML:

<script>
  window.pekiSettings = {
    chatbotId: "YOUR_CHATBOT_ID",
    welcomeMessage: "Hello, how can I assist you today?",
    popup: false,
    buttonPosition: "right",
    theme: "light",
  };
  !(function () {
    var script = document.createElement("script");
    script.src = "https://script.peki.ai/chatbox";
    script.async = true;
    document.body.appendChild(script);
  })();
</script>

Authenticated User Integration​

For logged-in users, use this enhanced script with user information:

<script>
  window.pekiSettings = {
    chatbotId: "YOUR_CHATBOT_ID",
    userId: "unique_user_id",
    name: "User Name",
    dataDictionary: {
      email: "[email protected]",
      phone: "+1234567890",
      city: "New York",
    },
    welcomeMessage: "Hello, how can I assist you today?",
    popup: false,
    buttonPosition: "right",
    theme: "light",
  };
  !(function () {
    var script = document.createElement("script");
    script.src = "https://script.peki.ai/chatbox";
    script.async = true;
    document.body.appendChild(script);
  })();
</script>

Configuration Options​

Required Fields​

  • chatbotId: Your unique Peki chatbot identifier
  • For authenticated users:
    • userId: Unique identifier for the user
    • name: User's display name

Optional Fields​

  • welcomeMessage: Custom greeting message shown when the chat opens
  • popup: Boolean to control if chat opens automatically
    • true: Chat window opens automatically
    • false: Chat remains minimized until clicked (default)
  • buttonPosition: Position of the chat button
    • 'right': Places button on right side (default)
    • 'left': Places button on left side
  • theme: Visual theme of the chat interface
    • 'light': Light mode (default)
    • 'dark': Dark mode
  • dataDictionary: Object containing additional user information
    • email: User's email address
    • phone: User's phone number
    • city: User's city
    • Can be extended with custom fields

Sample Implementation​

Here's a complete HTML example showing the integration:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website with Peki Chat</title>
  </head>
  <body>
    <h1>Welcome to my website</h1>

    <!-- Peki Chat Integration -->
    <script>
      window.pekiSettings = {
        chatbotId: "YOUR_CHATBOT_ID",
        userId: "user123",
        name: "John Doe",
        dataDictionary: {
          email: "[email protected]",
          phone: "+1234567890",
          city: "San Francisco",
        },
        welcomeMessage: "Hi there! How can I help you today?",
        popup: false,
        buttonPosition: "right",
        theme: "light",
      };
      !(function () {
        var script = document.createElement("script");
        script.src = "https://script.peki.ai/chatbox";
        script.async = true;
        document.body.appendChild(script);
      })();
    </script>
  </body>
</html>

Best Practices​

  1. Always place the script near the end of your <body> tag for optimal page loading
  2. Use a unique and consistent userId for authenticated users
  3. Provide as much relevant user information in dataDictionary as available
  4. Test the integration in both light and dark themes to ensure proper visibility

Troubleshooting​

If the chat widget doesn't appear:

  1. Verify your chatbotId is correct
  2. Check browser console for any JavaScript errors
  3. Ensure the script is properly loaded and not blocked by ad blockers
  4. Verify all required fields are properly formatted