Embedding an external widget in Discourse

Development

AI-generated summary

In a discussion titled ‘Embedding an external widget in Discourse’ under the Dev category, cokestroke seeks help embedding a Jira Helpdesk widget into their Discourse instance. While the widget works on their external site mystrokeguide.com, it fails to display in Discourse despite being pasted into the theme’s head section or via the Easy Footer plugin, with no errors shown. denvergeeks requests more details and notes a broken link in the original post, also referencing a related meta topic on Jira Service Desk integration. cokestroke clarifies they want a popup widget for ticket submission, similar to the one on their website, and rules out Zapier due to cost and login requirements. Eventually, cokestroke resolves the issue by creating a new theme component, pasting the script in its head section, and crucially, adding the Atlassian script URL to the Content Security Policy under Settings. This workaround successfully renders the widget as intended.

1

Hi there,
I’m trying to embed a widget that’s connected to our Jira Helpdesk on our Discourse instance but the script isn’t working. You can see it work fine on our content website https://mystrokeguide.com but when I try embedding it on Discourse using the theme editor I get nothing.
Any ideas what I’m doing wrong?

2

@cokestroke your link (in your post here) to My Stroke Guide site is formatted incorrectly so is not opening up your site…

link-no-work
link-no-work700×580 38 KB

Also, please provide more detail about how you have tried (i.e. the code you are trying to embed, and specifically what errors you are getting, etc.)

3

Thanks @denvergeeks I saw your edit. I’m trying to copy a simple script using the either the Easy Footer or Landing page plugin. I’m copying the code into the head section but it’s not throwing any errors. Just not displaying. I’ve removed the key from the code below but essentially that’s it

<script data-jsd-embedded data-key=" " data-base-url="https://jsd-widget.atlassian.com" src="https://jsd-widget.atlassian.com/assets/embed.js"></script>
4

I still don’t understand @cokestroke – did you paste that code into the head section of the theme settings, or somewhere in a plugin? Please also provide links to (either/or) the plugin or theme component.

Have you seen this Topic…

Is that what you are trying to accomplish?

5

I tried putting the code in the Easy Footer plugin and then tried it in the head of the theme. I’m expecting a pop up to appear at the bottom of the page so people can raise a ticket or ask a question. The Zapier integration would cost extra and might need to have a user logged in to post in the category that would pull requests into Jira Service Desk. I want it to look like it does on https://mystrokeguide.com

Screenshot 2023-08-18 at 18.36.19
Screenshot 2023-08-18 at 18.36.191234×886 69.5 KB

Screenshot 2023-08-18 at 18.36.45
Screenshot 2023-08-18 at 18.36.45896×860 205 KB

Screenshot 2023-08-18 at 18.37.19
Screenshot 2023-08-18 at 18.37.191054×1388 233 KB

6

I managed to do it by

  • creating a new component and activating it for the current theme

  • going the the Edit CSS/HTML button and pasting the script in the head region

  • Important part was to add the Atlassian URL loading the script to the Content Security Policy script src in the Settings .