Integrating a Custom HTML Chatbot into Ignition Perspective (Persistent Overlay)

Baskar_Arumugam · November 10, 2025, 8:45am

Hi everyone,

I’ve developed a custom web-based chatbot using HTML + JavaScript, which loads dynamically from an external source (or can be hosted locally). The chatbot works perfectly when opened in a standalone browser, but I’d like to embed it directly into my Ignition Perspective application so that:

The chatbot is always visible (persistent overlay, like a floating widget).
It should stay on top of other Perspective components — even when navigating between views.
The chat logic (JS) must remain fully functional, not stripped or sanitized by Perspective’s HTML filtering.

Thanks in advance to anyone who’s tackled something similar
any tips on keeping it persistent and responsive in Perspective would be appreciated

calimero100582 · November 10, 2025, 5:17pm

Do the chatbot do anything with the interface, or it could be in an iframe? I suppose the chatbot can use the session id as identifier

You can also have a look at HTML injection: https://forum.inductiveautomation.com/t/perspective-html-injection

bmusson · November 10, 2025, 6:23pm

You’ll want to do this as a module.

I’d create an additional React root, then listen to the dock positions in order to keep things aligned.

This is exactly how Periscope’s toast notification wrapper works:

github.com/mussonindustrial/embr

main/modules/periscope/web/src/extensions/toast/toast.tsx

8.1

import { toast, ToastContainer } from 'react-toastify'
import { createRoot } from 'react-dom/client'
import { getEmbrGlobals } from '@embr-js/perspective-client/src/globals'
import { merge } from 'lodash'

import './toast.css'
import React from 'react'
import { ClientStore } from '@inductiveautomation/perspective-client'
import { observer } from 'mobx-react-lite'
import { DockOffset } from '@inductiveautomation/perspective-client/build/dist/typedefs/stores/MountStore'

type CenterToastContainerProps = {
  dockOffset: DockOffset
}

const CenterToastContainer = observer(
  ({ dockOffset }: CenterToastContainerProps) => {
    return (
      <ToastContainer
        style={{

This file has been truncated. show original

Baskar_Arumugam · November 11, 2025, 8:47am

Using the WebDev module, I created a Python resource with the doGet HTTP method and embedded all my HTML code as a string so that the response returns the page in its original format. I then linked this resource through an Inline Frame component by providing the corresponding WebDev path. The integration works correctly, and the chatbot behaves as expected.

However, my concern is whether there is any alternative method to inject or render HTML—without using the WebDev module—while still achieving the same functionality.

Your input or suggestions on this would be greatly appreciated.