> ## Documentation Index
> Fetch the complete documentation index at: https://prismeai-legacy.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Chat Interface

> Create tailored conversational AI experiences with customizable chat interfaces

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

<CardGroup cols={2}>
  <Card title="Brand Alignment" icon="palette">
    Match your organization's visual identity
  </Card>

  <Card title="Flexible Layouts" icon="table-columns">
    Adapt to different contexts and placements
  </Card>

  <Card title="Interactive Elements" icon="hand-pointer">
    Rich components for enhanced user experience
  </Card>

  <Card title="Embedding Options" icon="code">
    Simple integration with existing web properties
  </Card>
</CardGroup>

## Use Cases

<Tabs>
  <Tab title="Website Integration">
    Enhance your web presence with:

    * Customer support chat widgets
    * Product advisor assistants
    * Interactive FAQ sections
    * Guided sales experiences
  </Tab>

  <Tab title="Internal Portals">
    Improve employee experience with:

    * IT helpdesk assistants
    * HR policy advisors
    * Knowledge base interfaces
    * Training companions
  </Tab>

  <Tab title="Custom Applications">
    Extend your applications with:

    * In-app support features
    * Workflow assistants
    * Interactive tutorials
    * Data analysis companions
  </Tab>
</Tabs>

## 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:

<Steps>
  <Step title="Download the Template">
    Visit the [Prisme.ai Templates Repository](https://github.com/prisme-ai/templates/custom-chat) and download the ZIP file
  </Step>

  <Step title="Import into Your Instance">
    In your Prisme.ai instance, go to AI Builder > Import Workspace and upload the ZIP file
  </Step>

  <Step title="Configure the Interface">
    Customize colors, layout, and components to match your requirements
  </Step>

  <Step title="Connect Your Agent">
    Select which Prisme.ai agent will power the chat interface
  </Step>

  <Step title="Deploy the Interface">
    Generate the embedding code and add it to your website or application
  </Step>
</Steps>

<Note>
  SaaS Prisme.ai users can access this template directly from the Template Gallery.
</Note>

## Example: Embedding Code

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

```html theme={null}
<!-- 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:

```yaml theme={null}
       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:

* Enhance your agent with the [Initial Prompting Agents](/resources/templates/init-prompting-agents) template for better conversations
* Add website knowledge with the [Website to Agent](/resources/templates/website-to-agent) template
* Explore advanced conversational patterns in the [AI Builder documentation](/products/ai-builder/blocks)