Skip to main content
Answer

How do I use klaviyo in the Next.js framework? The official JavaScript sample page crashes!

  • November 27, 2025
  • 1 reply
  • 2 views

 

 

```

<script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/W35555/klaviyo.js"></script>

<script

type="text/javascript"

dangerouslySetInnerHTML={{

__html: `

!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];

try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){

var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,

o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?

o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){

t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],

window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}();

`

}}

/>

```

The page is making endless requests:

```

 GET /services/login_with_shop/authorize?analytics_trace_id=e5d75996-e0bc-488e-9116-c98cfa82f971&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 466ms (compile: 7ms, render: 459ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=724dfba1-544d-44f1-95c7-4ae17bc967d6&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 1132ms (compile: 4ms, render: 1128ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=c7a37455-cd7b-4c98-9c67-70150066d074&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 626ms (compile: 5ms, render: 621ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=1a535ef8-976f-4852-9d52-c5ac1478a8c9&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 560ms (compile: 5ms, render: 555ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=ceaf202b-faf2-465c-aa4f-59f301e0202e&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 624ms (compile: 18ms, render: 606ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=726f96e4-526c-4ab1-af8f-75b2a8717d90&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 536ms (compile: 5ms, render: 531ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=806ff966-e42b-4d53-8796-754b0ccb9ff6&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 564ms (compile: 5ms, render: 559ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=7764eb4a-74d5-4b84-8c79-9d7a61999f02&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 588ms (compile: 4ms, render: 584ms)
 GET /services/login_with_shop/authorize?analytics_trace_id=4fcbdacb-a039-4c07-aa61-245a23d49902&api_key=5edd9000b933a8fa88c152d1e498531f&compact_layout=true&flow=discount&flow_version=EMAIL_CAPTURE&locale=en&target_origin=http%3A%2F%2Flocalhost%3A3000&require_verification=false 404 in 133ms (compile: 5ms, render: 128ms)

```

The initial page load count was 121 requests, but after adding the klaviyo script, the number of requests suddenly exploded to 2876 within ten seconds!

 

 

How can I use it correctly in the Next.js framework?

The official documentation should provide correct examples.

Best answer by Byrne C

Hey ​@liaoyi,

Thanks for the question! This might take a deep dive from a member of our support team to figure out, but I did notice one thing in your code that can change.

I see that you used <script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/W35555/klaviyo.js"></script> as our onsite javascript. W35555 is not the account ID of any Klaviyo account. Was this 6-character ID copied directly from our documentation (Could you also send over a link to the documentation you’re looking at, just to ensure we’re on the same page?)? If so, you’d want to replace it with the account ID of your Klaviyo account instead. It’s the public API key in your API keys settings.

That being said, if you’re using W35555 on purpose as a placeholder, as to not give away your account ID to the community, I understand!

1 reply

Byrne C
Community Manager
Forum|alt.badge.img+27
  • Community Manager
  • Answer
  • November 28, 2025

Hey ​@liaoyi,

Thanks for the question! This might take a deep dive from a member of our support team to figure out, but I did notice one thing in your code that can change.

I see that you used <script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/W35555/klaviyo.js"></script> as our onsite javascript. W35555 is not the account ID of any Klaviyo account. Was this 6-character ID copied directly from our documentation (Could you also send over a link to the documentation you’re looking at, just to ensure we’re on the same page?)? If so, you’d want to replace it with the account ID of your Klaviyo account instead. It’s the public API key in your API keys settings.

That being said, if you’re using W35555 on purpose as a placeholder, as to not give away your account ID to the community, I understand!