Is it possible to render Jira Service Management embedded widget inline instead of of floating ❓

Pratik Harne

I am integrating the Jira Service Management embedded widget in a React application using the standard embed script:

Is there any supported way to:

• Open the widget by default

• Render it inline (center of page / below a card)

• Disable the floating launcher button

I’m using React, and dynamic script loading or CSS overrides didn’t work.

If this is not supported by design, what is the recommended alternative to embed a support form inline?

Marc -Devoteam-

Hi @Pratik Harne 

Running this question in AI provides me with:\

Technically, Jira does not natively support an "inline" mode or an "open by default" state via the standard script configuration.

However, because the widget is essentially an iframe injected into your DOM, we can use some "creative engineering" (and a bit of CSS/JS) to get close to what you want.

1. Open the Widget by Default
There is no openOnLoad: true parameter in the script. The widget is designed to initialize in a hidden state.

The Workaround: You can programmatically trigger a "click" on the launcher button once the script has finished loading.

JavaScript
useEffect(() => {
const checkExist = setInterval(() => {
const launcher = document.getElementById('jsm-widget-launcher'); // Default ID
if (launcher) {
launcher.click();
clearInterval(checkExist);
}
}, 100);
}, []);

2. Render it Inline (Center of Page)
The widget is hard-coded to use position: fixed within its own internal styling. It is not designed to sit in the document flow (like a <div>).

The Workaround: To make it look "inline," you must wrap the script in a container and then use CSS overrides with !important to force the widget's iframe into a relative position.

Warning: This is fragile. If Atlassian changes the class names or ID of the container, your layout will break.

3. Disable the Floating Launcher Button
You can hide the default button by adding a specific property to your window.ATL_JQ_PAGE_PROPS object (if using the older collector) or simply via CSS.

The CSS Way:

CSS
#jsm-widget-launcher {
display: none !important;
}
Recommended Strategy for React
If you need a truly "inline" experience that feels like part of your app, the standard embed script will likely frustrate you. Here are your two best paths forward:

Path A: The "Portal" Approach (Easier)
Use the standard script, hide the launcher button, and trigger the widget using your own React Button.

Set display: none on the default launcher.

Use window.JIRA_WIDGET_API.open() (if available in your version) or a document.getElementById('...').click() inside your React component's onClick handler.

Path B: The "Iframe" Approach (Stable)
Instead of the script, use a standard HTML <iframe> pointing directly to your Portal URL.

Pros: Truly inline, can be centered, no floating buttons.

Cons: Users might have to log in again if they aren't authenticated in that browser session, and you lose the "widget" animations.