Skip to main content
Solved

subscribe to context events without React

  • October 21, 2024
  • 2 replies
  • 107 views

briancore

The documentation mentions that React is not needed, but there aren’t any examples of subscribing to context events without using React, so I’m hoping you can point me in the right direction.

Is there a simple way to use the sdk without React for sidebar plugins? Preferably, a way to include a script directly on a page (without a build step) and then subscribe to events.

Something similar to this would be great:

<script type="text/javascript" src="https://dl.frontapp.com/libs/frontjs.min.js"></script>
<script>
Front.contextUpdates.subscribe(context => {
switch(context.type) {
case 'noConversation':
console.log('No conversation selected');
break;
case 'singleConversation':
console.log('Selected conversation:', context.conversation);
break;
case 'multiConversations':
console.log('Multiple conversations selected', context.conversations);
break;
default:
console.error(`Unsupported context type: ${context.type}`);
break;
}
});
</script>

However the Front object that is created by that included script doesn’t have a contextUpdates property.

Best answer by xdmnl

Front’s plugin SDK is published on NPM, we do not provide hosted versions of it that can be included in an HTML document directly.

If your plugin doesn’t have a build step, you can add the plugin SDK by importing the content of the file located in dist/index.umd.js that is included in the NPM package (for example, by copy/pasting it).
Doing so will make the plugin SDK accessible via the global variable named “Front”, similar to the code you posted.

2 replies

xdmnl
Forum|alt.badge.img+1
  • Fronteer
  • Answer
  • October 21, 2024

Front’s plugin SDK is published on NPM, we do not provide hosted versions of it that can be included in an HTML document directly.

If your plugin doesn’t have a build step, you can add the plugin SDK by importing the content of the file located in dist/index.umd.js that is included in the NPM package (for example, by copy/pasting it).
Doing so will make the plugin SDK accessible via the global variable named “Front”, similar to the code you posted.


briancore
  • Author
  • Conversationalist
  • October 22, 2024

Thank you so much for the quick reply!

The dist/index.umd.js file is exactly what I was looking for, enabling this pattern:

<script type="text/javascript" src="/path/to/index.umd.js"></script>
<script>
Front.contextUpdates.subscribe(context => {
switch(context.type) {
...
}
});
</script>

to work great on any page (without a build step).

FYI: The Github link on NPM is broken.

 

Thank you!!