Integrating TeamDay.ai Widget into Your Website

Welcome to the TeamDay.ai SDK integration guide! This easy-to-follow tutorial will help you embed our powerful AI assistant widget into your website, enhancing user engagement and productivity.

Step 1: Include the TeamDay SDK

First, add the TeamDay SDK script to your HTML file. Place this line just before the closing </body> tag:

<script>
    window.loadTeamdaySDK = function loadTeamdaySDK() {
        return new Promise((resolve, reject) => {
            if ('requestIdleCallback' in window) {
                window.requestIdleCallback(
                    () => {
                        const script = document.createElement('script');
                        script.src = 'https://sdk.teamday.ai/teamday-sdk.js';
                        script.async = true;
                        script.defer = true;
                        script.onload = resolve;
                        script.onerror = reject;
                        document.head.appendChild(script);
                    },
                    { timeout: 5000 },
                );
            } else {
                // Fallback for browsers that don't support requestIdleCallback
                setTimeout(() => {
                    const script = document.createElement('script');
                    script.src = 'https://sdk.teamday.ai/teamday-sdk.js';
                    script.async = true;
                    script.defer = true;
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                }, 0);
            }
        });
    }
</script>

Step 2: Initialize the SDK

Next, create a new instance of TeamdaySDK and initialize it with your desired options. Here's a basic example:

Replace CHARACTER_ID with the actual ID of the character you want to use.

<script>
    document.addEventListener('DOMContentLoaded', function () {
        loadTeamdaySDK()
            .then(() => {
                if ('TeamdaySDK' in window) {
                    const sdk = new window.TeamdaySDK({
                        containerId: 'teamday-container', // Optional
                        width: '100%',
                        height: '100%',
                    });
                    const teamdaySDK = sdk.init({
                        characterId: 'CHARACTER_ID', // Replace with your actual character ID
                        aiChatModalProps: {
                            headerTitle: 'Chat',
                            disableHeader: false,
                            hasSidePadding: true,
                        },
                        // Additional context if needed
                        context: [{ role: 'user', content: 'Hello, how can you help me today?' }],
                    });
                    teamdaySDK.show();
                }
            })
            .catch((error) => {
                console.error('Failed to load TeamdaySDK:', error);
            });
    });
</script>

Step 3: Customize the Widget

You can customize the widget's appearance and behavior by passing additional options when initializing the SDK. Here are some common options:

• containerId: ID of the container element where the widget will be placed.
• width: Width of the widget.
• height: Height of the widget.