The Custom Chat Interface template provides a framework for creating branded, tailored conversational experiences that can be embedded in your websites, applications, or internal portals. This template focuses on the presentation layer, allowing you to customize how users interact with your AI agents.

​
Template Overview

This template includes:

  • Customizable chat interface components
  • Backend integration with Prisme.ai agents
  • Responsive design for all devices
  • Easy embedding capabilities

Brand Alignment

Match your organization’s visual identity

Flexible Layouts

Adapt to different contexts and placements

Interactive Elements

Rich components for enhanced user experience

Embedding Options

Simple integration with existing web properties

​
Use Cases

Enhance your web presence with:

  • Customer support chat widgets
  • Product advisor assistants
  • Interactive FAQ sections
  • Guided sales experiences

​
Key Features

  • Theme Customization: Colors, typography, spacing, and UI element styling
  • Layout Options: Floating bubble, inline chat, full-page interface, or sidebar
  • Component Library: Message bubbles, typing indicators, file uploaders, and more
  • Interaction Patterns: Quick replies, structured inputs, carousels, and galleries
  • Accessibility: WCAG 2.1 AA compliant components and interactions

​
Getting Started

For self-hosted Prisme.ai installations, follow these steps:

1

Download the Template

Visit the Prisme.ai Templates Repository and download the ZIP file

2

Import into Your Instance

In your Prisme.ai instance, go to AI Builder > Import Workspace and upload the ZIP file

3

Configure the Interface

Customize colors, layout, and components to match your requirements

4

Connect Your Agent

Select which Prisme.ai agent will power the chat interface

5

Deploy the Interface

Generate the embedding code and add it to your website or application

SaaS Prisme.ai users can access this template directly from the Template Gallery.

​
Example: Embedding Code

Here’s a simplified example of how to embed your custom chat interface:

<!-- Prisme.ai Custom Chat Widget -->
<script src="https://cdn-assets.prisme.ai/blocks/popover/inject/index.js"></script>
<script type="text/javascript">
Prismeai.popover({
  "url": "https://ai-knowledge-chat.pages.prisme.ai/agent?id=YourAgentID",
  "config": {
    "header": {
      "closeColor": "#7f7f7f",
      "title":" "
    },
  }
})
</script>

​
Customization Options

The template includes several pre-built themes and configurations that you can modify:

       setup:
          input:
            emojis: false
            speechRecognition: false
            enabled: true
            disableSubmit: '{{disableSubmit}}'
            placeholder:
              fr: Message
              en: Message
            event: sendInput
            attachments: '{{attachments}}'
            upload:
              expiresAfter: '{{uploadDuration}}'
              public: false
              shareToken: true
            payload:
              id: '{{conversationId}}'
              agentId: '{{agentId}}'
              thread: '{{currentThread}}'
              model: '{{modelsDropDown.selected.value}}'
              webhookPayload: '{{webhookPayload}}'
              toolsPayload: '{{toolsPayload}}'
            tools:
              list: '{{tools}}'
            datasources:
              list: '{{datasources}}'
            blocksRight: '{{blocks}}'
        history: '{{messages}}'
        display:
          startAtTop: false
          submitButton:
            background: '#015DFF'
          sentMessages:
            background: '#015DFF'
            text: '#ffffff'
            sanitize: true
          receivedMessages:
            background: '#F1F2F7'
            text: '#333'
            sanitize: false
          avatar:
            background: transparent
          icons:
            send: send
            upload: attachment
        css: YOUR_CSS

​
Mobile Responsiveness

The custom chat interface is designed to adapt to different screen sizes:

  • Desktop: Full featured with optional sidebar integration
  • Tablet: Optimized layout with collapsible elements
  • Mobile: Streamlined interface with touch-friendly controls

​
Next Steps

After implementing this template, you can:

Was this page helpful?

Raise issue