JavaScript Options.

The JavaScript widget allows you to override the default contact details, settings, themes, and text for individual users. This can be done by including the contact, settings, theme, and text objects in the init method as follows;

h2h('init', {
    project_id: '{YOUR_PROJECT_ID}',
    contact: {
        // ... contact details goes here
    },
    settings: {
        // ... settings goes here
    },
    theme: {
        // ... theme goes here
    },
    text: {
        // ... text goes here
    }
});

All settings, themes and text are optional and can be changed for all users from Settings > Widget. Providing them directly in the widget allows you to override these values for individual users. A list of all available fields and example values can be found below.

• Contact fields
• Settings fields
• Theme fields
• Text fields

The contact object is used to provide user details to the widget. Below is an example of a contact object.

contact: {
        name: 'John Doe',
        email: '[email protected]',
        identifier: 'user-example-123',
        hash: '{USER_HASH}',
        metadata: {
            hash: '{METADATA_HASH}',
            // ... metadata goes here
        }
    }

Replace {YOUR_PROJECT_ID} with your project ID found at Settings > Widget. Replace {USER_HASH} and {METADATA_HASH} with verification hashes which can be generated by following the hash generation guide.

Settings can be configured to customize the widget's behavior. Below is a list of all available settings and their default values.

settings: {
    await_consent: false, // Wait for user consent (such as from a cookie banner) before starting widget
    ai: {
        enabled: true, // Allow AI to assist in conversations
        types: ['sales', 'support', 'billing'], // Which types of AI to use - allows you to override for individual users
    },
    collector: {
        enabled: true, // Allow the collector to monitor activity for this user
        disable_bots: true, // Disable collector for bots. Highly recommended to leave this enabled.
    },
    show_glow: { // When to show the AI "glow" effect
        on_insight: true,
        on_insight_reply: true,
        on_ai_typing: false,
        on_human_typing: false,
    },
    message: { // Allow the user to send screenshots and attachments
        collect_screenshot: true,
        collect_attachments: true,
    },
    collect: { // Collect user details before starting a conversation
        require_name: false,
        require_email: false,
    }
}

The theme object is used to configure the widget's appearance. Below is a list of all available settings and their default values.

theme: {
    button: { // Configure the main chat button appearance
        closed: {
            background: "#484748",
            color: "#ffffff",
        },
        open: {
            background: "#f5f6fb",
            color: "#cecece",
        },
    },
    avatar: { // Configure the avatar (AI and human) appearance
        background: "#b2e2ff",
    },
    insight: { // Configure the sales and support insight appearance
        background: "#ffffff",
        color: "#333333",
    },
    window: { // Configure the open chat window appearance
        background: "#ffffff",
        color: "#000000",
    },
    chat: { // Configure the chat message appearance
        agent: {
            background: "#f1f9ff",
            color: "#000000",
        },
        user: {
            background: "#2ca1e5",
            color: "#ffffff",
        },
    },
    input: { // Configure the chat input appearance
        message: {
            background: "#f5f6fb",
            color: "#666",
        },
        button: {
            color: "#cecece",
        },
        send: {
            background: "#484748",
            color: "#ffffff",
        },
    },
}

The text object is used to configure the widget's text and messages. Below is a list of all available settings and their default values.

text: {
    errors: {
        connection: "Sorry we could not connect to the server. Please check your connection and try again.",
    },
    ai: {
        chat: "AI assisted conversation. Please verify important details.",
        selection: "Who would you prefer to talk to?",
        ai: "AI",
        ai_response: "Responds instantly",
        human: "Human",
        human_response: "Responds within 24 hours",
    },
    message: {
        placeholder_message: "Send a message...",
        placeholder_message_chat: "Message...",
        placeholder_files: "Drag your files here!",
        tooltip_contact: "Edit your details",
        tooltip_screenshot: "Send screenshot",
        tooltip_attach: "Send file",
        tooltip_send: "Send message",
        button_send: "Send",
        error_name: "Please enter your name",
        error_email: "Please enter a valid email address",
        error_message: "Please enter a message to send",
    },
    collect: {
        placeholder_name: "Your Name",
        placeholder_email: "[email protected]",
    },
    prompt: {
        email_prompt: "Receive an email when {agent_name} replies!",
        edit_contact: "Edit your contact details below",
        placeholder_email: "[email protected]",
        validate_error: "Sorry, that email address does not appear to be valid. Please enter your email address.",
    },
    chat: {
        return_title: "Continue Conversation",
        return_last_message: "Last message",
        return_active: "Currently active",
        sending: "Sending...",
        sending_image: "Sending image...",
        sending_images: "Sending images...",
        sending_file: "Sending file...",
        sending_files: "Sending files...",
        failed: "Failed to send",
        sent: "Sent",
        received: "Received",
    }
}