Basic Integration

To add the Web to Slack widget on your dashboard/websites, follow the steps below

On the Thena webapp and navigate to Global Settings > Web Widget
Enter the required details such as domain, colors etc and generate the Thena key as well as Widget Private Key.
1. Domain to whitelist: This helps us identify the vendor domain, so that any request detected outside the domain is flagged as a customer request.
2. Appearance
  1. Branch colors: Make the widget look like the rest of your application. Simply select the primary and secondary color that best aligns with the customer experience that you want to provide.
  2. Widget Title/ Subtitle: Customise the messaging to the end user.
3. Functionality
  1. Auto response message: Send an auto responder message to acknowledge a customer ask.
  2. Select channel: Identify the specific channel where you would like all the customer messages to be directed to.

Once you have the Thena key, add the following code in your <HEAD>tag on your index.html file:

<!-- Thena Widget -->
    <script>
      window.thenaWidget = {
        thenaKey: 'YOUR_THENA_SDK_KEY',
      }
    </script>
    <script async>
      ;(function (window, document) {
        ;(window.thena = {}), (m = ['update', 'setEmail'])
        window.thena._c = []
        m.forEach(
          (me) =>
            (window.thena[me] = function () {
              window.thena._c.push([me, arguments])
            })
        )
        window.thena.update(window.thenaWidget)
        var elt = document.createElement('script')
        elt.type = 'text/javascript'
        elt.async = true
        elt.src = 'https://cdn.prd.cloud.thena.ai/shim.js'
        var before = document.getElementsByTagName('script')[0]
        before.parentNode.insertBefore(elt, before)
      })(window, document, undefined)
    </script>
<!-- End of Thena Widget -->

This will initialise the Thena widget on your dashboard. To identify the user, you must pass the user email and the hashed email to securely allow your users to connect with your Slack conversation flow.
📘
Supported hashing algorithm is HMAC. Using the private key, HMAC for the email can be generated as here: generateHmac()

// generate the hashed email using the provided thena private key
// this function should output HMAC
// we recommend that you create a hashing function on your server and use that to get the hash
// this is to ensure your private key is always secure
const hashedEmail = yourFunctionToEncryptTheEmail('USER_EMAIL', 'YOUR_PRIVATE_KEY')

// once you have the hashed email, use the window object to set both email and the hashed email
(window as any).thena.setEmail({
  email: 'USER_EMAIL,
  hashedEmail: hashedEmail,
})

Once you identify the user in the SDK, Thena widget will load on the webpage and allow users to preview older chats, start new chats etc.

👍
Congratulations: Web to Slack using Thena has now been setup.

Logout

You can logout from the Thena Web Widget also once your users logout from your website. This will remove the Thena widget from the page and clear any credentials for the same.

(window as any).thena?.logout()