The Majestic Network

How to Install Joci-Bot

Adding the chat assistant involves copying a small code snippet and pasting it into your website's HTML source. Follow these simple steps:

Step 1: Subscribe

To activate the full features of the Joci-Bot, please subscribe first.

Step 2: Copy the Chatbot Code Snippet

Once subscribed, copy the entire code block below. This script contains everything needed to display and operate the chatbot on your site.

<!-- Start Majestic Network Chatbot Embed Script -->
<script>
  (function() {
    // --- Configuration ---
    const iframeId = 'majestic-chatbot-iframe';
    const iframeBaseUrl = 'https://joci.themajesticnetwork.com/Joci-Bot/joci-origin.html'; // Chatbot URL
    const expectedIframeOrigin = 'https://joci.themajesticnetwork.com'; // Origin of the chatbot code

    // --- Initial Styles ---
    const initialStyles = {
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        width: '60px',
        height: '60px',
        border: 'none',
        borderRadius: '50%',
        overflow: 'hidden',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
        zIndex: '9999', // Ensure high z-index
        transition: 'width 0.3s ease-in-out, height 0.3s ease-in-out, border-radius 0.3s ease-in-out'
    };

    // --- Expanded Styles ---
    const expandedStyles = {
        width: '350px',
        height: '450px',
        borderRadius: '10px'
    };

    // --- Minimized Styles ---
    const minimizedStyles = {
        width: initialStyles.width,
        height: initialStyles.height,
        borderRadius: initialStyles.borderRadius
    };

    // --- Create and Inject Iframe ---

    // Check if iframe already exists (prevents duplicates if script runs multiple times)
    if (document.getElementById(iframeId)) {
        console.warn('Majestic Chatbot Embed: Iframe already exists.');
        return;
    }

    const iframeElement = document.createElement('iframe');
    iframeElement.id = iframeId;
    iframeElement.title = "The Majestic Network Chatbot";

    // Apply initial styles
    for (const property in initialStyles) {
        iframeElement.style[property] = initialStyles[property];
    }

    // Construct the src URL with parent origin
    const parentOrigin = window.location.origin;
    if (!parentOrigin) {
        console.error("Majestic Chatbot Embed: Could not determine parent window's origin. Chatbot functionality may be limited.");
        // Decide fallback behavior - maybe don't append?
    }
    iframeElement.src = `${iframeBaseUrl}?parentOrigin=${encodeURIComponent(parentOrigin)}`;
    console.log(`Majestic Chatbot Embed: Setting iframe src to: ${iframeElement.src}`);

    // ** Crucial Step: Append directly to the body **
    // This should happen after the body element is available.
    // Running this script just before </body> ensures this.
    document.body.appendChild(iframeElement);
    console.log(`Majestic Chatbot Embed: Iframe appended to document body.`);


    // --- Event Listener for Iframe Messages ---
    window.addEventListener('message', function(event) {
        // Security Check: Only accept messages from the expected iframe origin
        if (event.origin !== expectedIframeOrigin) {
            return;
        }

        const iframe = document.getElementById(iframeId); // Get reference again inside listener
        if (!iframe) return; // Should exist, but check anyway

        // Handle resizing messages
        if (event.data === 'chatbot-opened') {
            console.log("Parent Page: Received 'chatbot-opened' message. Expanding iframe.");
            Object.assign(iframe.style, expandedStyles);
        } else if (event.data === 'chatbot-closed') {
            console.log("Parent Page: Received 'chatbot-closed' message. Minimizing iframe.");
            Object.assign(iframe.style, minimizedStyles);
        }
    });

  })(); // Immediately Invoke Function Expression (IIFE)
</script>
<!-- End Majestic Network Chatbot Embed Script -->

Step 3: Add the Snippet to Your Website

The best place to add this script is just before the closing tag in your site's HTML. This ensures your page content loads first, providing a smooth experience for your visitors.

Find the instructions below that match your website's platform:

A. Static HTML Websites (using plain .html files)

Open the .html file(s) for the pages where you want the chatbot using a text editor or code editor.
Scroll to the very bottom of each file.
Locate the closing tag.
Paste the copied code snippet on a new line directly above .
Save the changes to your file(s).
Upload the updated file(s) back to your web server.

B. PHP Websites (custom code, not a specific CMS)

Identify the main template or footer file that contains the closing tag. This file is often included on most pages (e.g., footer.php, layout.php, main_template.php).
Open this template file in your editor.
Find the closing tag.

Paste the copied code snippet on a new line directly above , like this:

<?php /* Footer PHP code might be here */ ?>

<!-- Start Majestic Network Chatbot Embed Script -->
<script>
  (function() {
    // --- Configuration ---
    const iframeId = 'majestic-chatbot-iframe';
    // ... (Full script content as copied) ...
    // Note: Ensure any single quotes within your actual script are handled correctly if pasting into PHP like this.
    // It might be safer to close PHP tags ?> before the script and reopen <?php after if needed.
  })();
</script>
<!-- End Majestic Network Chatbot Embed Script -->

</body>
</html>

Save the changes to the template file.
Upload the updated file to your web server. The chatbot should now appear on all pages using this template.

Alternative for PHP files: If your footer template has significant PHP code near the end, it's often cleaner to close the PHP tag, paste the HTML/JS script, and then reopen PHP if necessary:

<?php
    // ... some PHP code for the footer ...
    render_footer_widgets();
?>

<!-- Start Majestic Network Chatbot Embed Script -->
<script>
  (function() {
    // ... (Full script content as copied) ...
  })();
</script>
<!-- End Majestic Network Chatbot Embed Script -->

</body>
</html>

C. WordPress Websites

Choose one of these methods:

Plugin (Recommended):
- Go to "Plugins" > "Add New" in your WordPress admin area.
- Search for a plugin like "Insert Headers and Footers", "WPCode", or similar trusted options.
- Install and activate the plugin.
- Find the plugin's settings page (often under "Settings" or "Tools").
- Paste the copied chatbot code snippet into the section labeled "Scripts in Footer", "Footer Code", or similar.
- Save the plugin settings.
Theme Options (If available):
- Go to "Appearance" > "Customize" or your theme's specific options panel.
- Look for a section named "Custom Scripts," "Header/Footer Scripts," "Integration," or similar.
- Paste the copied snippet into the "Footer" or "Body End" script area.
- Publish or save the changes in the Customizer/Theme Options.
Editing footer.php (Advanced - Use a Child Theme):
- Warning: Editing theme files directly can break your site and changes may be lost on theme updates. Use a Child Theme to prevent losing your changes.
- Go to "Appearance" > "Theme File Editor".
- Select your active Child Theme.
- Choose the "Theme Footer" (footer.php) file from the list on the right.
- Find the tag (usually near the very end, often after `wp_footer();`).
- Paste the copied snippet on a new line directly above .
- Click "Update File".

D. Other CMS & E-commerce Platforms (Shopify, Joomla, Drupal, etc.)

Most platforms provide a way to add custom scripts:

Shopify: Edit your theme code (Online Store > Themes > Actions > Edit code). Open the theme.liquid file (under Layout). Paste the snippet just before the closing tag. Save.
Joomla: Use a template override for your main template file (often `index.php` within the template directory) or look for template settings ("Styles" > Your Template > Advanced/Custom Code) that allow custom code/scripts in the footer/before body end. Extensions for script insertion are also common.
Drupal: Modify your theme's html.html.twig file (or equivalent) to include the script before , preferably within your custom theme or sub-theme. Check theme settings (Appearance > Settings > Your Theme) for script injection areas.
General Principle: Look for "Custom Scripts", "Footer Code", "Tracking Code", or theme template file editors within your platform's admin panel or documentation. The goal is always to insert the script just before the closing tag in the site's main template file.

E. JavaScript Frameworks/SPAs (React, Vue, Angular, Svelte, etc.)

For Single Page Applications (SPAs), you need to ensure the script runs after the main application layout is rendered to the DOM.

The most common place to add this is in the main public/index.html file (or equivalent static HTML shell), just before the closing tag, similar to static HTML. This is often the simplest approach if your framework uses such a file.
Alternatively, you might need to manage the script programmatically:
- React: Use a useEffect hook in your top-level component (e.g., App.js) to append the script element, ensuring it only runs once on mount. Consider using libraries like react-helmet-async or Next.js's

Chatbot Installation Guide

How to Install Joci-Bot

Step 1: Subscribe

Step 2: Copy the Chatbot Code Snippet

Step 3: Add the Snippet to Your Website