Configuration

📘

Installing Web to Slack requires adding code to your Frontend. You might need an engineer's help if you can't access the codebase.

Getting Started

Adding Web Chat Widget

Follow these steps to integrate the Web Chat widget on your dashboard or website:

  1. Navigate to Global Settings > Web Widget in the Thena webapp.
  2. Fill in the required details and generate the Thena key and Widget Private Key:
    • Whitelist Domains for Secure Access: Easily secure your services by whitelisting trusted domains. When you add a domain to your whitelist, you're allowing it to interact with your resources, ensuring that only specified domains can make requests to your platform. You can add multiple domains, one at a time.

      Enter only the domain names, excluding 'http://', 'https://', 'www', and 'localhost'.

    • Appearance Settings:
      • Colors: Choose primary and secondary colors to match your application's design.
      • Widget Title/Subtitle: Customize the messaging for users.
  3. After clicking 'Submit/Update', you will receive the Private_Key and API_Key. These keys are needed for the code snippets in the next steps.

Add Script to Body

Add the following code to your <HEAD> tag in your index.html file.

<script>
      window.thenaWidget = {
        thenaKey: 'API_KEY', // api key provided by Thena in the web-to-slack settings page
      }
</script>
<script async>
      ;(function (window, document) {
        ;(window.thena = {}), (m = ['update', 'setEmail', 'logout'])
        window.thena._c = []
        m.forEach(
          (me) =>
            (window.thena[me] = function () {
              window.thena._c.push([me, arguments])
            })
        )
        var elt = document.createElement('script')
        elt.type = 'text/javascript'
        elt.async = true
        elt.src = 'https://cdn.prd.cloud.thena.ai/shim.js'
        elt.onload = function () {
          window.thena.update(window.thenaWidget)
        }
        var before = document.getElementsByTagName('script')[0]
        before.parentNode.insertBefore(elt, before)
      })(window, document)
</script>

Enable the Chat Widget

You should add this code wherever the user has already logged in and details like the User’s email become available.

useEffect(() => {
  const init = async () => {
    // call the hmac  that you added in you backend 
    const hashedEmail = await yourFunctionToEncryptTheEmail(
      'USER_EMAIL', // add user email here
      'PRIVATE_KEY' // the private key provided by the thena  in the web-chat setting page
    )

    // or just window.thena?.setEmail if not using TypeScript
    (window as any).thena?.setEmail({
      email: 'USER_EMAIL', // add user email here
      hashedEmail: hashedEmail, // the hashed email returned by the hmac function
    })
  }
  init()
}, [])

Enhanced Security: User Identity Verification

To ensure added security, implement identity verification for users sending messages via the chat widget. This prevents impersonation by prohibiting customers from manually altering their email addresses in the frontend.

In your backend, hash the user’s email address using HMAC-SHA256 with the Private_Key generated in step 3.

const { createHmac } = require("crypto");
/**
 * Generates an HMAC (Hash-based Message Authentication Code) using the provided email and private key.
 * @param {Object} args - The args object.
 * @param {string} args.email - The email to be used in the HMAC generation.
 * @param {string} args.privateKey - The private key to be used in the HMAC generation.
 * @returns {string} The generated HMAC.
 */
const generateHmac = ({ email, privateKey }) => {
  return createHmac("sha256", privateKey).update(email).digest("hex");
};

const hashedEmail = generateHmac({
  email: "USER_EMAIL",
  privateKey: "PRIVATE_KEY",
});

console.log({ hashedEmail });
import hmac
import hashlib

def generate_hmac(email, private_key):
    """
    Generate HMAC (Hash-based Message Authentication Code) for the given email and the private key.

    Args:
        email (str): The email address to generate HMAC for.
        private_key (str): The private key used for HMAC generation.

    Returns:
        str: The HMAC generated for the email and private key.
    """
    hmac_obj = hmac.new(private_key.encode(), email.encode(), hashlib.sha256)
    hash_digest = hmac_obj.hexdigest()
    return hash_digest

hashedEmail = generate_hmac(
    email="USER_EMAIL",
    private_key= "PRIVATE_KEY"
)

print('hashedEmail', hashedEmail)

Now the user is verified when they open the chat!

👍

You are now setup to use Web to Slack.