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 on Discord for support and discussions with other developers.