How to add Atlassian widget to Shopify page

Technical Q&A
,

Topic summary

Goal: Embed the Atlassian support widget via its script snippet into a Shopify Contact page.

Attempts and results:

  • Script was pasted into the page’s description (Online Store > Pages > Contact), but the widget did not appear in Preview.
  • Script works in online HTML editors, confirming the snippet itself is valid.
  • Adding the script directly into a custom “contact-test” template triggered an error: “Invalid JSON: unexpected token,” indicating the script was placed in a JSON template file.

Guidance provided:

  • Verify the exact script from Atlassian docs (data-key, base URL, src) and ensure the page is Visible/Live.
  • Instead of inserting into a JSON template, add the script in theme.liquid before , wrapped in a Liquid condition:
    • {% if template contains ‘contact’ %} [script here] {% endif %}
  • Test again on the live page.

Notes:

  • Screenshots were shared to illustrate where code was added and the preview outcome, but are not essential to reproduce steps.

Status: Unresolved. Next action is to try the theme.liquid conditional approach; access constraints remain (no staff access granted).

Summarized with AI on January 3. AI used: gpt-5.
1

Hi, Can someone help me to give me a guide on how can I add Atlassian widget to Shopify page.

We want to use our custom form.
Here is the example:

I want to add it on this page:
https://2buo2njo8afwacso-82635784493.shopifypreview.com/pages/contact

2

Hi @Sasha84 Just go to the Online Store > Pages > open Contact and in the description box you can paste the script code and save it! Done

3

Hi @saim007 So I need to add a script code not the link I have shared and it should work with Atlassian?
I have tried adding this, but it does not look like it works.

4

@Sasha84 Just see the screenshot I hope you will understand.

sandyparihar07_0-1710242854560.png
sandyparihar07_0-1710242854560.png1343×620 61.8 KB

5

Yes, I have understood that. This is what I have tried before and it did not work. I add the code, but when I click on “Preview page” I do not see Atlassian page.

Skjermbilde 2024-03-12 kl. 12.45.37.png
Skjermbilde 2024-03-12 kl. 12.45.37.png1634×972 107 KB

6

If you can give me staff role than I can check the issue and fix it!

7

I cannot give you staff role, but will check with admin if that is possible. Can you give me some suggestion on what more can I check?

8

@Sasha84 First check the script tag code is correct and if you copy this code from the Atlassian than just once checkout the documentation or instruction. Second, try to put this script code in your contact us page template “contact-test” which you created and make the page Visible and then check.

I hope this will work and instead of testing on your site, you can check the script on any online html code editor tool so if script was right than it will work on any platform or site.

Good luck!

9

@saim007 Thx I have tested the script and it works as expected on the online html code editors.
When I try to add it to the “contact-test” template I get an error message saying. **“**Invalid JSON: unexpected token” Unable to update file.

Do you have any suggestion on what should I do or how to add this script to template?

10

Hi @Sasha84 try to add this code into the theme.liquid file before tag.

{% if template contains ‘contact’ %}

Add your script code

{% endif %}

Make sure your page is visible and live.

I hope this will work!