Webchat Channel

We have developed a Webchat channel that allows users to embed their peers into their own systems using either a URL or a script. This provides a customizable chat experience that can be tailored through a user-friendly form interface.

1. Embed via Script

To embed the Webchat using a script, include the following code snippet in your website:

<script src="https://app.cognipeer.com/scripts/cognipeer.sdk.js"></script>
<script>
  window.cognipeer.chat({
    hookId: "HOOK_ID",
    contact: {
      name: "John",
      surname: "Doe"
    }
  });
</script>

2. Embed via URL

Alternatively, you can embed the Webchat directly using a URL:

https://app.cognipeer.com/webchat/HOOK_ID

This URL accepts three parameters: contact, params, and context as json string.

Channel Parameters

Contact

The contact parameter allows you to pass user-specific information to the Webchat. This helps in creating and tracking users on your end.

• name: The first name of the user.
• surname: The last name of the user.
• email: The user’s email address.
• integrationId: A unique identifier for the user within your system.

Example Usage:

<script>
  window.cognipeer.chat({
    hookId: "HOOK_ID",
    contact: {
      name: "Jane",
      surname: "Smith",
      email: "jane.smith@example.com",
  integrationId: "user_12345"
    }
  });
</script>

Params

The params parameter is used to pass additional data to the Webchat without sending it to the Language Learning Model (LLM). This is useful for tools and functionalities that require specific data.

Example Usage:

<script>
  window.cognipeer.chat({
    hookId: "HOOK_ID",
    params: {
      sessionId: "abcde12345",
      featureFlag: true
    }
  });
</script>

Context

The context parameter allows you to send contextual information about the current user directly into the prompt. This enhances the relevance and personalization of the chat interactions.

Example Usage:

<script>
  window.cognipeer.chat({
    hookId: "HOOK_ID",
    context: {
      currentUser: {
        id: "user_12345",
        role: "admin",
        preferences: {
          theme: "dark"
        }
      }
    }
  });
</script>

Complete Example

<script src="https://app.cognipeer.com/scripts/cognipeer.sdk.js"></script>
<script>
  window.cognipeer.chat({
    hookId: "HOOK_ID",
    contact: {
      name: "Alice",
      surname: "Johnson",
      email: "alice.johnson@example.com",
  integrationId: "user_67890"
    },
    params: {
      sessionId: "xyz789",
      featureFlag: false
    },
    context: {
      currentUser: {
        id: "user_67890",
        role: "user",
        preferences: {
          language: "en",
          notifications: true
        }
      }
    }
  });
</script>

How to Customize Theme Settings

Go to Webchat channel details under Peer Details/Channels tab.

Logo Settings

• Logo Source (src): Enter the URL of your logo image.
• Logo Width (width): Specify the width of the logo in pixels.
• Logo Height (height): Specify the height of the logo in pixels.
• Logo Alt Text (alt): Provide alternative text for the logo.

Color Settings

• Primary Color (primary): Choose the primary color for your Webchat interface.
• Black Color (black): Select the shade of black for text and other elements.
• White Color (white): Select the shade of white for backgrounds and highlights.
• Header Background (headerBG): Choose the background color for the header.
• Main Background (mainBG): Choose the background color for the main chat area.
• Footer Background (footerBG): Choose the background color for the footer.

Theme Settings

• Font Family (fontFamily): Select the font family for the Webchat text.
• Border Radius (radius): Set the border radius for rounded corners in the Webchat elements.