Staffjet Athena Chatbot Integration Guide

Step-by-step integration for modern frameworks

Staffjet's Athena Chatbot is a lightweight and customizable chatbot that can be embedded in different frontend frameworks. This guide provides step-by-step instructions and code snippets for integrating Staffjet's Athena Chatbot into React, Angular, Vue, and plain HTML/JavaScript applications.

Integration in Plain HTML/JavaScript

Integration guide for Integration in Plain HTML/JavaScript applications

Step 1: Include the Athena Chatbot script in the <head> section of your HTML.

The following script tag should be included in the <head> section of your HTML to load the Athena Chatbot script:

<script src='https://api.staffjet.ai/v1/embed.js'></script>

Step 2: Add a container <div> for the chatbot

Create a <div> element with an ID that matches the one specified in the script tag. For example, if the ID is 'athena-chatbot', the <div> element should have an ID of 'athena-chatbot'.

<div id='athena-chatbot'></div>

Step 3: Initialize the chatbot

Initialize the chatbot using JavaScript. Below is the complete code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Athena Chatbot</title>
    <script src="https://api.staffjet.ai/v1/embed.js"></script>
</head>
<body>
    <div id="athena-chatbot-container"></div>

    <script>
        window.AthenaChatbot.initChatbot("athena-chatbot-container", {
            apiKey: "YOUR_API_KEY"
        });
    </script>
</body>
</html>

Integration in React

Integration guide for Integration in React applications

Step 1: Install Athena Chatbot in public/index.html by adding the script.

<script src='https://api.staffjet.ai/v1/embed.js'></script>

Step 2: Use useEffect to initialize the chatbot inside a React component.

import { useEffect } from "react";

const AthenaChatbot = () => {
  useEffect(() => {
    //@ts-ignore
    window.AthenaChatbot.initChatbot("athena-chatbot-container", {
      apiKey: "YOUR_API_KEY"
    });
  }, []);

  return <div id="athena-chatbot-container"></div>;
};

export default AthenaChatbot;

Integration in Angular

Integration guide for Integration in Angular applications

Step 1: Include the script in angular.json under the 'scripts'.

"options": {
            "scripts": [
              "https://api.staffjet.ai/v1/embed.js"
            ],
        }

Step 2: Use AfterViewInit lifecycle hook to initialize the chatbot.


import { Component, AfterViewInit } from "@angular/core";

@Component({
  selector: "app-athena-chatbot",
  template: "<div id="athena-chatbot-container"></div>",
})
export class AthenaChatbotComponent implements AfterViewInit {
  ngAfterViewInit() {
    //@ts-ignore
    window.AthenaChatbot.initChatbot("athena-chatbot-container", {
      apiKey: "YOUR_API_KEY"
    });
  }
}

Integration in Vue

Integration guide for Integration in Vue applications

Step 1: Add the Athena script dynamically in index.html.

<head>
  <script src="https://api.staffjet.ai/v1/embed.js"></script>
</head>

Step 2: Use mounted lifecycle hook to initialize the chatbot.

<template>
  <div id="athena-chatbot-container"></div>
</template>

<script>
import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      window.AthenaChatbot.initChatbot("athena-chatbot-container", {
        apiKey: "YOUR_API_KEY"
      });
    });
  },
};
</script>

Integration in Next.js

Integration guide for Integration in Next.js applications

Since Next.js uses SSR (Server-Side Rendering), we need to dynamically load the chatbot.


import { useEffect } from "react";

const AthenaChatbot = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      import("https://api.staffjet.ai/v1/embed.js").then(() => {
        window.AthenaChatbot.initChatbot("athena-chatbot-container", {
          apiKey: "YOUR_API_KEY"
        });
      });
    }
  }, []);

  return <div id="athena-chatbot-container"></div>;
};

export default AthenaChatbot;

Integration in Wordpress

Integration guide for Integration in Wordpress applications

Upload the given below code snippet at wp-content/themes/[your_theme]/functions.php

function enqueue_athena_chatbot_scripts() {
    // Athena Chatbot Script
    wp_enqueue_script(
        'athena-chatbot',
		'https://athena-chatbot-1053840004341.asia-southeast1.run.app/qualimatrix/athena.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_athena_chatbot_scripts');

function athena_chatbot_inline_script() {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        if (window?.AthenaChatbot) {
          window.AthenaChatbot.initChatbot("athena-chatbot-container", {
            apiKey: "1d0cb4ff-7893-40df-a979-ff89c40f25ca"
          });
        } else {
          console.warn("AthenaChatbot is not loaded yet.");
        }
      });
    </script>
    <?php
}
add_action('wp_footer', 'athena_chatbot_inline_script', 100);

Integration in Svelte

Integration guide for Integration in Svelte applications

<script>
  import { onMount } from "svelte";

  onMount(() => {
    window.AthenaChatbot.initChatbot("athena-chatbot-container", {
      apiKey: "YOUR_API_KEY"
    });
  });
</script>

<div id="athena-chatbot-container"></div>

Integration in jQuery

Integration guide for Integration in jQuery applications

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Athena Chatbot</title>
    <script src="https://api.staffjet.ai/v1/embed.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="athena-chatbot-container"></div>

    <script>
        $(document).ready(function() {
            window.AthenaChatbot.initChatbot("athena-chatbot-container", {
                apiKey: "YOUR_API_KEY"
            });
        });
    </script>
</body>
</html>

Need Help?

Join our community or check out additional resources for more advanced integrations.