This guide explains how to embed and configure the RelationKit Widget on your website.

First up! Head over to your Space's Settings from your Dashboard and click Web Widgets in the sidebar.

Quick Start

Add the following code to your website before the closing </body>  tag:

<!-- Widget Configuration -->
<script>
    window.relationKitSettings = {
        api_key: "YOUR_API_KEY",
        options: {
            websiteToken: "YOUR_WEBSITE_TOKEN",
            widgetLauncherColor: "#000000" // Customize the widget launcher color
        },
        customer: {
            name: "Customer Name",     // Optional: Set if known
            email: "customer@email.com", // Optional: Set if known
            user_id: "123"            // Required: Your system's user ID
        }
    };
</script>

Be sure to import the scripts for the RelationKit sync script as well as the widget:

<script src="https://YOURSUBDOMAIN.relationkit.io/relkit.js"></script>
<script src="https://YOURSUBDOMAIN.relationkit.io/widget.js" async defer></script>

Configuration Options

Required:

- `api_key`: Your RelationKit API key

- `options.websiteToken`: Your website's unique token from RelationKit for the Widget
- `options.widgetLauncherColor`: Hex color code for the widget launcher button

- `customer`: Object containing customer information (if known)

  - `name`: Customer's name

  - `email`: Customer's email address

  - `user_id`: Your system's unique identifier for the customer

JavaScript API

The widget provides several methods you can use to control it programmatically:

// Open the widget
window.RelationKitWidget.open();

// Close the widget
window.RelationKitWidget.close();

// Toggle the widget (open if closed, close if open)
window.RelationKitWidget.toggle();

Example usage:

<button onclick="window.RelationKitWidget.open()">
    Open Support
</button>

Best Practices

1. Place the widget scripts just before the closing `</body>` tag for optimal page load performance.

2. The `widget.js` script uses `async` and `defer` attributes to ensure it doesn't block page rendering.

3. If you know the customer's information, provide it in the configuration to enable a more personalized experience.

4. Use the JavaScript API methods to create custom trigger points for opening the widget throughout your site.

Troubleshooting

1. Ensure your `api_key` and `websiteToken` are correct

2. Check that both script tags are properly included

3. Verify the widget configuration is set before the script tags

4. Check your browser's console for any error messages

Support

If you need assistance implementing the widget or have questions, please contact our support team by creating a New Conversation