The wrrk chat widget can be embedded on any website. Customize its appearance and behavior to match your brand.

Go to Chatbots > [Your Bot] > Deploy.
Copy the embed code snippet.
Paste it into your website's HTML, just before the closing </body> tag.

The snippet looks like:

html

<script src="https://widget.wrrk.ai/v1/chat.js"
  data-bot-id="your-bot-id"
  data-org-id="your-org-id">
</script>

Appearance Settings

Navigate to Chatbots > [Your Bot] > Appearance to customize:

Colors:

Primary color (header, send button)
Background color
Text color
Chat bubble color

Position:

Bottom-right (default)
Bottom-left
Custom offset from edges

Size:

Compact (360px wide)
Standard (400px wide)
Large (480px wide)

Avatar:

Upload a custom avatar image for the bot
Or use the default wrrk bot avatar

Greeting:

Set a greeting message that appears when the widget opens
Configure a proactive message that pops up after a delay

Behavior Settings

Auto-open: Automatically open the widget after a visitor has been on the page for X seconds.

Pages: Show the widget on all pages, or only on specific URLs.

Business hours: Show a different greeting or disable the widget outside business hours.

Visitor identification: If your website has logged-in users, pass their info to the widget for personalized conversations:

javascript

WrrkChat.identify({
  name: "John Doe",
  email: "john@example.com"
});

Mobile Responsiveness

The widget automatically adapts to mobile screens. On phones, it opens full-screen for a better experience. You can disable the mobile full-screen behavior in Appearance settings if preferred.

Analytics

Track widget performance:

Impressions: How many visitors saw the widget.
Engagement Rate: Percentage who started a conversation.
Conversion Rate: Percentage who completed a desired action (e.g., left contact info).