Overview

Magic Links are a streamlined way to connect your customers to integrations using a customizable URL. This eliminates the need to embed hotglue’s widget, manage JWTs, or implement custom authentication workflows.

Magic Links allow you to:

  • Generate secure, shareable URLs for integration setup
  • Customize the appearance to match your brand
  • Control which flows and connectors users can access
  • Track and manage user connections

Quick Start Guide

  1. Go to Settings > Widget
  2. Select your brand color and fonts
  3. Go to Settings > Magic Link
  4. Add your logo, with a title and description for your page.
  5. Add custom helper buttons

2. Add a custom domain (Pro Plan)

If you don’t see Custom Domain settings, ask the hotglue team to enable it!

  1. Choose Domain:

    • Go to Settings > Magic Link.
    • Enter the full subdomain to deploy the magic link to (e.g., links.example.com).
  2. Verify Ownership:

    • Add the provided CNAME record via your DNS provider.
    • Make sure you turn off proxying for the CNAME, if it’s on by default.
  3. Route Traffic:

    • Once the first CNAME is detected, you will get a second CNAME record.
    • Add the second record to route traffic through our secure servers.

It may take up to 10 minutes for your domain to propogate. If you are having trouble, ask the hotglue team!

  1. Go to Tenants > Create Magic Link
  2. Enter tenant ID (required)
  3. To limit tenants to particular flows or connectors, select flows and connectors to display (optional)
  4. Click a “Generate Link”
  5. Send it to a customer! 🚀

To try out your own requests, check out the API reference for Magic links.

  1. POST {env_id}/connect with your Personal Access Token or Secret API Key, along with a tenant ID.
Basic Magic Link
curl --request POST \
  --url https://client-api.hotglue.xyz/{env_id}/connect \
  --header 'Content-Type: application/json' \
  --header 'x-api-key: <api-key>' \
  --data '{
     "tenant": "test-user",
     "type": "all"
}'
  1. Optionally, restrict your tenant to a specific flow…
Flow-locked magic link
curl --request POST \
  --url https://client-api.hotglue.xyz/{env_id}/connect \
  --header 'Content-Type: application/json' \
  --header 'x-api-key: <api-key>' \
  --data '{
     "tenant": "test-user",
     "flow": "<flowId>",
     "type": "flows"
}'

… or a specific connector

Connector-locked magic link
curl --request POST \
  --url https://client-api.hotglue.xyz/{env_id}/connect \
  --header 'Content-Type: application/json' \
  --header 'x-api-key: <api-key>' \
  --data '{
     "tenant": "test-user",
     "flow": "<flowId>",
     "entityId": "<connectorId>",
     "type": "connector"
}'
  1. Any of the above requests will return a url that you can share with customers.
Response
{
  "url": "https://connect.hotglue.com/?token=XXXXXXXXXXXXXXXXXXXXX"
}

5. Advanced settings

When generating a Magic Link, you can pass additional options to customize the integration experience. You can use any options control that’s available to the React widget:

{
    "tenant": "test-user",
    "type": "all",
    "options": {
        // Your configuration options here
    }
}

Commonly used Options

  • checkLink - Never show the configuration popup to your user. Just let the authorize.
  • schemas - Enable custom field mapping
  • tenantMetadata - Add additional metadata about your customers, like company names
  • listener - Take action when users connect
  • localization - Custom text and language settings
  • multipleSources/multipleConnectors - Allow users to connect multiple integrations
  • hideBackButtons - Remove back navigation buttons
  • nextStep - Define next step in flow

Example Usage

The below Magic Link generation request would create a link that:

  • Displays a mapping module to the user
  • Redirects the user to the mapping module after they link
curl --request POST \
  --url https://client-api.hotglue.xyz/{env_id}/connect \
  --header 'Content-Type: application/json' \
  --header 'x-api-key: <api-key>' \
  --data '{
    "tenant": "test-user",
    "type": "all",
    "options": {
        "nextStep": mapping,
        "schemas": [
            {
                "flowId": "z_hoiFY_5",
                "schema": [
                    {
                        "table": "Leads",
                        "fields": [
                            {
                                "id": "first_name",
                                "name": "First Name"
                            },
                            {
                                "id": "email",
                                "name": "Email"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}'

For detailed documentation on the documented options, click the links above or visit our Options Reference.

Tips

  • Decide on a good convention for tenant IDs—it will be harder to change later! Org IDs that you use in other parts of your product will work well.
  • Use the customizable buttons to link to documentation and your support.

Need help? Ask the hotglue team!