chat-embed

chat-embed

Create and manage chats easily

How to use

Svelte

<script lang="ts">
    import Chat, * as chat from 'chat-embed/svelte';

    const handleMessage = async (event) => {
        const message = event.detail;
        if (message.fromUser) {
            chat.typing();

            setTimeout(() => {
                chat.send({
                    type: 'text',
                    content: cleanedText
                });
            }, 1000)
        }
    }
</script>

<Chat on:message={handleMessage} />

Others

import createChat from 'chat-embed';

const chat = createChat({ embed: document.body })

IIFE

<script src="https://www.unpkg.com/chat-embed/dist/index.iife.js"></script>
<script type="text/javascript">
    const chat = window.chatEmbed({ embed: document.body })
</script>

API

Create chat

On creating a chat, you can define the theme, the receiver and a widget, all three are optional.

const chat = window.chatEmbed({
    embed: document.body,
    receiver: {
        image: 'https://i.imgur.com/RZQ8tQ9.png',
        name: 'Jupiter Apple',
        status: 'online',
        round: '100%'
    },
    theme: {
        primaryColor: '#f54242'
    },
    widget: {
        right: false,
        size: "60px",
        round: "50%",
        background: "#f54242",
        image: "https://i.imgur.com/RZQ8tQ9.png",
        animated: true,
        popupMessage: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!',
        notification: {
            background: "#f54242",
            color: "#FFFFFF",
        }
    }
})

Chat methods

chat.addReceiver(receiver); // Add a function to handle chat messages
chat.typing(); // Starts typing animation
chat.toggle(); // Toggle chat opening
chat.clear(); // Clear all chat messages
chat.setInput(show); // Enable or disable input
chat.send(message); // Send a message on chat