JSM widget does not render when using the next/script component in Next.js

Simon Gowing
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
August 2, 2022

I want to use the JSM widget in an app I am developing using Next.js and TypeScript.

If I use the regular html <script> tag in the _document.tsx, the widget is rendered correctly in the browser and is usable.

 

<Html>
<Head>
<script
async
id="jira-service-desk-widget"
data-jsd-embedded="true"
data-key="some-data-key"
data-base-url="https://jsd-widget.atlassian.com"
src="https://jsd-widget.atlassian.com/assets/embed.js"></script>
...
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>

 

But I want to use the next.js <Script> tag in order to optimise the loading of the app using the 'strategy: lazyOnLoad' prop. When I do this, the script can be seen when I inspect the html in the browser but the widget is not rendered at any point.

 

<Html>
<Head>
<Script
id="jira-service-desk-widget"
data-jsd-embedded
data-key="some-data-key"
data-base-url="https://jsd-widget.atlassian.com"
src="https://jsd-widget.atlassian.com/assets/embed.js"
strategy="lazyOnload"></Script>

...
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>

 

1 answer

0 votes
Victor Frunze
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 16, 2024

use 

strategy='beforeInteractive'

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
FREE
TAGS
AUG Leaders

Atlassian Community Events