JavaScript Extension

Purpose

The JavaScript Extension allows you to invoke JavaScript from a Seismic tenant. Common use cases include:

• Chatbots, Helpbots, and Rate Your Experience overlays
• Creating a link to an external service

❗️

Security

Include any custom javascript at your own risk. By including code, you understand and acknowledge any risks associated with including custom JavaScript into the application.

Prerequisites

• There are no prerequisites within the app configuration

How it works

When it's triggered

If the app is installed and enabled in a tenant, the JavaScript extension is called upon loading the Seismic tenant into your web browser. This includes mobile browsers, but not from within the Seismic mobile apps.

What's running

The code that you've provided to the extension from within your settings is executed. Seismic administrators control which users are impacted via the App Permissions settings.

Here is a sample code which adds a chat button on the page.

(function () {
  // Prevent duplicate injection
  if (document.getElementById('seismic-chat-button')) return;

  // Read user info
  const raw = sessionStorage.getItem('seismicUserInfo');
  const userInfo = raw ? JSON.parse(raw) : null;
  const fullName = userInfo?.fullName || 'User';

  // Create button
  const button = document.createElement('div');
  button.id = 'seismic-chat-button';

  // Dummy SVG icon
  button.innerHTML = `
    <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
      <path d="M4 4h16v12H7l-3 3V4z"/>
    </svg>
  `;

  // Style button
  Object.assign(button.style, {
    position: 'fixed',
    bottom: '20px',
    right: '20px',
    width: '48px',
    height: '48px',
    backgroundColor: '#0078D4',
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    boxShadow: '0 4px 10px rgba(0,0,0,0.2)',
    zIndex: '9999'
  });

  // Create chat panel
  const panel = document.createElement('div');
  panel.id = 'seismic-chat-panel';

  Object.assign(panel.style, {
    position: 'fixed',
    bottom: '80px',
    right: '20px',
    width: '320px',
    height: '420px',
    backgroundColor: '#fff',
    borderRadius: '8px',
    boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
    display: 'none',
    zIndex: '9999',
    overflow: 'hidden'
  });

  // Header with user name
  const header = document.createElement('div');
  header.innerText = `Hello, ${fullName}`;
  Object.assign(header.style, {
    padding: '10px',
    backgroundColor: '#f5f5f5',
    fontSize: '14px',
    borderBottom: '1px solid #ddd'
  });

  // Chat iframe (pass user name)
  const iframe = document.createElement('iframe');
  iframe.src = `https://your-chat-app.example.com?user=${encodeURIComponent(fullName)}`;
  iframe.style.width = '100%';
  iframe.style.height = 'calc(100% - 40px)';
  iframe.style.border = 'none';

  panel.appendChild(header);
  panel.appendChild(iframe);

  // Toggle panel
  button.onclick = function () {
    panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
  };

  // Append to page
  document.body.appendChild(button);
  document.body.appendChild(panel);
})();

What's expected

The JavaScript should perform any actions that you have told it to do.
For example, the provided code sample in the doc places a linked image onto the bottom right of your Seismic tenant. When they click on this link, it will route them to the URL provided.

Accessing data

JavaScript extensions are intended for lightweight UI integrations such as buttons, launch points, and simple embedded actions. Extensions should not depend on internal page state, DOM structure, or unsupported application objects.

The only supported page-level data available to JavaScript extensions is seismicUserInfo, which is provided through session storage. Use this value only for lightweight context-aware behavior in your extension.

Read the value from session storage:

const seismicUserInfo = sessionStorage.getItem('seismicUserInfo');

seismicUserInfo

{
	"userId": "7fadfd69-e450-4f0b-8251-6de7a7f18bb8",
	"userName": "[email protected]",
	"firstName": "Joe",
	"lastName": "Demo",
	"fullName": "Joe Demo",
	"email": "[email protected]",
	"tenant": "quake",
	"licenseType": "Premium",
	"organization": "Sales",
	"language": "en-US",
	"groups": [
		"Sales"
	],
	"properties": [
		{
			"name": "value",
			"values": []
		}
	]
}

Unsupported access

JavaScript extensions should not access or depend on:

• Internal page state
• Arbitrary DOM scraping
• Private application objects
• Other session or local storage values unless explicitly documented

These are not part of the supported extension contract and may change without notice.

❗️

Deep Integration with platform is not supported

Any script which is included should not rely on any aspect of the Seismic platform in order to function. The dependence on any Seismic javascript libraries, DOM elements, CSS classes, or page URLs is not supported. In other words, don't try to deeply inject into the application, rather, inject only in top level elements such as the head and body.

How to Configure

Configure the Javascript Extension Point

• Add the JavaScript Extension to your application as described here
• Input an Extension Instance Name
• Paste your JavaScript into the JavaScript Code Editor
• Click Save Changes
• Make sure to enable the extension point and click Save Changes

Best practices

• Use only seismicUserInfo for supported context
• Handle missing or invalid values safely
• Do not assume additional data is available
• Do not rely on internal DOM structure or application state
• Keep extensions lightweight and focused on their purpose

Troubleshooting

• Ensure the extension point is enabled within your app

• The app will need to be upgraded in the tenants where it has been installed after making a change

• It can sometimes take between 5 and 30 minutes for the changes to be visible in the tenant

• Authentication and Scopes are NOT required for this app to function