Replies posted by Tobbbe

1 Reply

K
Contributor II
karan.tiplContributor II
asked in Developer Group

Implement Embed Klaviyo forms in SPA apps like GatsbyJS / ReactJS.

I made a very ugly workaround for nextjs. But it works… 🙃😃The idea is to display the form on a page through an iframe (😂) which will reload every time, even on client side navigation.Since the iframe doesnt know its containing page’s height, we try setting it using an interval.1. Create a client side component (for nextjs app dir)'use client'import React from 'react'import { useWindowSize } from 'react-use'export function KlaviyoForm({ id }: { id: string }) { const ref = React.useRef<HTMLIFrameElement>(null) const [height, setHeight] = React.useState(0) const window = useWindowSize() const onLoad = () => { let lastH = 0 let tries = 0 const maxTries = 42 // try for 420ms then give up const interval = setInterval(() => { tries++ if (maxTries < tries) { clearInterval(interval) console.warn('Could not initate iframe height for klaviyo form.') } const h = ref.current!.contentWindow?.document.documentElement.scrollHeight ||

21
M
Contributor II
3 months ago

Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.