Skip to content

Adds support for multi display type messages #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BernardGatt wants to merge 12 commits into
base: develop
Choose a base branch
from
Open

Adds support for multi display type messages #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bfbedac
Added the ability to move between message steps with different displa…
Nov 24, 2025
12d356b
Added SDK capabilities and some other fixes to multi-step
Nov 25, 2025
17fa99a
Fixed a few issues with multi-step
Nov 25, 2025
314b569
Prevents duplicate messages to be displayed at the same time
Nov 26, 2025
7f3b8f3
Persisted messages now have saved state
Nov 28, 2025
05f9c51
Updated demo with multi-step message and test renderer
Dec 1, 2025
c7a03c5
Better default handling
Dec 1, 2025
acf95ee
Fixes issues with internal display settings
Dec 3, 2025
25a3307
Ads a check to dismiss existing messages if they break a multi-step f…
Dec 11, 2025
9d862a8
Merge branch 'develop' into feature/INAPP-14008
Dec 12, 2025
6aa6336
PR feedback
Dec 12, 2025
faff7a0
Fixes an issue with wide overlays
Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ <h1>Gist for Web</h1>
</div>
<div class="row examples">
<a href="#" class="button" onClick="showHTMLMessage()">Show HTML Message</a>
<a href="#" class="button" onClick="showMultiStepMessage()">Show HTML Multistep Message</a>
<a href="#" class="button" onClick="showSimpleMessage()">Show Simple Message</a>
<a href="#" class="button" onClick="showMessageWithProperties()">Show Message With Properties</a>
<a href="#" class="button" onClick="showComplexMessage()">Show Complex Message</a>
Expand Down Expand Up @@ -102,6 +103,7 @@ <h4>Gist.setUserToken()</h4>
<script src="../dist/gist.js"></script>
<script type="text/javascript">
var EncodedTestHTMLMessage = "eNrdWG1v2zYQ/p5fwWkfkgCWZcd2V7i2hy1dVwxpMyAphn0aKPEkcaFIgaT80qL/fUfLSRRFcpVsKwoTdiKRx7vjPc+RPM++e315fv3n77+Q1GZicTRz/4igMpl7ID3XAZQtjgi2WQaWkiil2oCdex+u3/gvveqQpBnMvSWHVa609UikpAWJoivObDpnsOQR+NuXHuGSW06FbyIqYD7sD25VWW4FLH67unxPrCJvr99dkBW3KTm/upoF5WApaOzm9tm1ULEN+XT36lqMDvgxzbjYTMlPGs31iKHS+AY0j1/dyX4+unvsZ2AMTeCNxsXU1IU0ukm0KiTzIyWUnpLv47iipvRCM9C+powXZkqGg3z9UCCjOuFySs4ejeSUMS6TpqFQrX2TUqZWUzIgZ/majPGrk5CeDHpk9+kPT5uXFPM1sAtu7B+cJWBrq2Lc5IJigGIBNbOux2dcQ2S5Qp9x1UUm9xh5qzT/iEGn4jnm/i6M5fHG3/GmFPFBsmaLdOvVzgjPkpqhLc+mZPQomCnwJLVNI1GhjYM1Vxw90M1mLaybV7Zlm+EfAWF/+Uj1jjCj0aiZD44pZLAntr9qzvZHNEGJh8pdj28hw3ELfgkfslJDDtSeTHpkGOvThikJzevcbY18PxQqumn0rCFhBoMfwi/kzLgeu6dQJoKHyLlGBU+kzzEOplmgFXfXrMYdg5cJUF8QJt3IEKAGnhioaaqWoLuEa/IiHHVR3omWL9poOdi2lv1o0sYDU+glbK7cDn5BQxCmhZkdcDM5xbMhBLsCaNthlEJwrnGdNTNu6f4W5GZ4qxEYd0rMilnaCNXWJINIaVoyA0EDLbiEzjuK+zsLdofYLCjP2Zk7xXbnG+NLEglqzNyrHkre/ZFXFamQqyJRl6odBTXJRummPb1hXn1ulZ0eUfJc8OjmbiV9pEbGjTk5fdWia6vP7epGR3MvtTY30yBA1WBNP0FP+mHBBQtudzcT8AwVm8DRFjCDhDLQz2XiYf7jHeTcvZOfC2uVbHM/QP8bItLS3Sn4TdL3qeotrlNuCH4oKZOJ3K6nvPRQ4ggmMQouyXokVSuyUoVgZKMKNwaE2x+/luNfZk/rrPvTa8+sZ3Lok7t4To8vcydNhsef95LqeWH4b8LSlRXDFugadXQT7SDWReTfonN2AOicHSw6owNAZ3Sw6IwPAJ3xwaIzOQB0Jt8iOnuGv9bFpxtO1RmPSqMnXHuqiLxGouEN0MQc2BNZXFVz1VHHNxDr+zLPW1zgZR9vxMYSozIgWF/dYAnf7j19nKwqB/lBi5NjV0JgBZEolQjoRyo77pFdBsccS25VWD9TGrDbUu1q9OO/QkHlDea1t7hENYRLvJBLWKFAOAtoexiV/p99rLqENabGqhfr9QRaveqOXq2r8rp7nAVlkYo1q/vN+B8CSHpg";
var EncodedTestMultiStepMessage = "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";

// Initialize Gist with config
const config = getConfig();
Expand Down Expand Up @@ -153,6 +155,20 @@ <h4>Gist.setUserToken()</h4>
);
}

function showMultiStepMessage() {
Gist.showMessage(
{
messageId: 'html-multistep-message',
position: 'center',
properties: {
gist: {
encodedMessageHtml: EncodedTestMultiStepMessage
}
}
}
);
}

function logIn() {
Gist.setUserToken("ABC456");
}
Expand Down
3 changes: 2 additions & 1 deletion src/gist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { log } from "./utilities/log";
import { clearExpiredFromLocalStore } from "./utilities/local-storage";
import { startQueueListener, checkMessageQueue, stopSSEListener } from "./managers/queue-manager";
import { setUserToken, clearUserToken, useGuestSession } from "./managers/user-manager";
import { showMessage, embedMessage, hideMessage, removePersistentMessage, fetchMessageByInstanceId, logBroadcastDismissedLocally } from "./managers/message-manager";
import { showMessage, embedMessage, hideMessage, removePersistentMessage, logBroadcastDismissedLocally } from "./managers/message-manager";
import { fetchMessageByInstanceId } from "./utilities/message-utils";
import { setUserLocale } from "./managers/locale-manager";
import { setCustomAttribute, clearCustomAttributes, removeCustomAttribute } from "./managers/custom-attribute-manager";
import { setupPreview } from "./utilities/preview-mode";
Expand Down
34 changes: 25 additions & 9 deletions src/managers/message-component-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { resolveMessageProperties } from "./gist-properties-manager";
import { embedHTMLTemplate } from "../templates/embed";
import { messageHTMLTemplate } from "../templates/message";
import { positions } from "./page-component-manager";
import { wideOverlayPositions } from "../utilities/message-utils";

const delay = ms => new Promise(res => setTimeout(res, ms));
const wideOverlayPositions = ["x-gist-top", "x-gist-bottom", "x-gist-floating-top", "x-gist-floating-bottom"];

export function isElementLoaded(elementId) {
var element = safelyFetchElement(elementId);
Expand All @@ -17,7 +17,7 @@ export function isElementLoaded(elementId) {
}
}

export function loadEmbedComponent(elementId, url, message, options) {
export function loadEmbedComponent(elementId, url, message, options, stepName = null) {
var element = safelyFetchElement(elementId);
if (element) {
var messageElementId = getMessageElementId(message.instanceId);
Expand All @@ -35,7 +35,7 @@ export function loadEmbedComponent(elementId, url, message, options) {
element.style.height = "0px";
}
element.innerHTML = embed(url, message, messageProperties);
attachIframeLoadEvent(messageElementId, options);
attachIframeLoadEvent(messageElementId, options, stepName);
} else {
log(`Message could not be embedded, elementId ${elementId} not found.`);
}
Expand All @@ -52,7 +52,11 @@ export function hideEmbedComponent(elementId) {
var element = safelyFetchElement(elementId);
if (element) {
element.classList.remove("gist-visible");
// Remove all gist-* classes (instanceId classes)
const classesToRemove = Array.from(element.classList).filter(cls => cls.startsWith('gist-'));
classesToRemove.forEach(cls => element.classList.remove(cls));
element.style.removeProperty("height");
element.style.removeProperty("width");
element.innerHTML = "";
}
}
Expand Down Expand Up @@ -85,24 +89,36 @@ export function resizeComponent(message, size) {
}
}

export function loadOverlayComponent(url, message, options) {
export function loadOverlayComponent(url, message, options, stepName = null) {
document.body.insertAdjacentHTML('afterbegin', component(url, message));
attachIframeLoadEvent(getMessageElementId(message.instanceId), options);
attachIframeLoadEvent(getMessageElementId(message.instanceId), options, stepName);
}

function attachIframeLoadEvent(elementId, options) {
function attachIframeLoadEvent(elementId, options, stepName = null) {
const iframe = document.getElementById(elementId);
if (iframe) {
iframe.onload = function() {
sendOptionsToIframe(elementId, options); // Send the options when iframe loads
sendOptionsToIframe(elementId, options, stepName); // Send the options when iframe loads
};
}
}

function sendOptionsToIframe(iframeId, options) {
// SDK capabilities that can be communicated to the renderer
const SDK_CAPABILITIES = [
'MultiStepDisplayTypes'
];

export function sendOptionsToIframe(iframeId, options, stepName = null) {
const iframe = document.getElementById(iframeId);
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage({ options: options }, '*');
const message = {
options: options,
capabilities: SDK_CAPABILITIES
};
if (stepName) {
options.stepId = stepName;
}
iframe.contentWindow.postMessage(message, '*');
}
}

Expand Down
Loading