Embedding in React

To embed in React, all you need to do is…

  • Install the DryMerge chat package via NPM.
    To obtain your public_key, visit the chatbot config page on your DryMerge dashboard.
  • Instantiate our React Component and pass in your public_key and a tenant_id (your user’s unique identifier).
  • Optionally, you can also pass in tenant_metadata to pass in any additional information you’d like to package with your user.

Install via NPM

In your project, simply run

npm i drymerge-chat

Include the Component in your website

In the examples below, only public_key is required. The other values are highly recommended if you want your users to have persistent, distinguished sessions and/or you want data about your users available to DryMerge Chat.

We currently support 2 form factors:

  1. Centered Panel
import { DryMergeChatPanel } from 'drymerge-chat';

function YourComponent() {
    return (
        {/* the other stuff in your component */}
        <DryMergeChatPanel public_key="<your_drymerge_public_key>" tenant_id="<your_optional_tenant_id>" tenant_metadata={/* Your Optional Tenant Metadata (must be a JSON object, map of string => value)*/}/>
    );
}
  1. Bottom-Right Chat Bubble
import { DryMergeChatBubble } from 'drymerge-chat';

function YourComponent() {
    return (
        {/* the other stuff in your component */}
        <DryMergeChatBubble public_key="<your_drymerge_public_key>" tenant_id="<your_optional_tenant_id>" tenant_metadata={/* Your Optional Tenant Metadata (must be a JSON object, map of string => value)*/}/>
    );
}

Customizing Style

Work in Progress!

Here are the default props. Feel free to tweak any of these to your liking!

function DryMergeChatPanel(
  height = "90vh",
  width = "600px",
  chatStyle = {
    position: 'fixed',
    top: "20px",
    right: "50%",
    borderWidth: '0px',
    boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
    borderRadius: '13px',
    borderStyle: 'solid'
  },
  buttonStyle = {
    position: 'fixed',
    bottom: '10px', // Adjust padding as needed
    right: '10px', // Adjust padding as needed
    width: '50px', // Size of the button
    height: '50px', // Size of the button
    borderRadius: '50%', // Make it rounded
    background: '#3C82F6', // Button color
    color: 'white', // Text color
    cursor: 'pointer', // Cursor on hover
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transition: 'all 0.3s ease' // Transition for the hover and move effect
  },
  title = "DryMergeChat"
)

Embedding in Vanilla JS

There are two steps necessary to successfully embed.

  • Obtain a session token for your current user using the Tenant Session API.
  • Instantiate an iframe and pass in the token.

Obtain a session token

To obtain your public_key, visit the chatbot config page on your DryMerge dashboard.
Make a POST request to https://api.drymerge.com/tenant/session with a JSON body set as…

{
  "public_key": "<your public key>",
  "tenant_id": "<your tenant id; equivalent to whatever you call your user internally>",
}

You can optionally add a metadata object to the body to pass in any additional information you’d like to package with your user. This is useful for passing in information like the user’s email, name, etc.

{
    "public_key": "<your public key>",
    "tenant_id": "<your tenant id; equivalent to whatever you call your user internally>",
    "metadata": {}
}
Do not expose any DryMerge API Keys via this interface. Public token is the only authenticating value that should ever be present in your frontend requests.

Instantiate an iframe

Vanilla JS
    // index.html
    <html>
        <head>
            <title>DryMerge Embed</title>
        </head>
        <script src="app.js"></script>

        <body>
            <iframe id="drymerge-iframe"
                    src="https://drymerge.com/chat"
                    width="100%"
                    height="500px">
            </iframe>
        </body>
    </html>

    // app.js
    document.addEventListener('DOMContentLoaded', function() {
        const iframe = document.getElementById('drymerge-iframe');
        fetchTokenAndPostMessage(iframe);
    });

    function fetchTokenAndPostMessage(iframe) {
        fetch('https://api.drymerge.com/tenant/session', {
                'method': 'POST',
                'headers': {
                    'Content-Type': 'application/json'
                },
                'body': {
                    'public_key': '<your public key>',
                    'tenant_id': '<your tenant id; equivalent to whatever you call your user internally>',
                    'metadata': {}
                }
            })
            .then(response => response.json())
            .then(data => {
                iframe.onload = function() {
                    iframe.contentWindow.postMessage({ accessToken: data.session_key }, 'https://drymerge.com');
                };
            })
            .catch(error => console.error('Error fetching token:', error));
    }