Working on the integration in builder.io and I have run into an issue.
Integrating Klaviyo forms using the Generic Embed displays the form properly in the builder preview, however, in our localhost view as well as after publishing, the company_id value is not being passed to the build config.
I’ve also added the company id to the Klaviyo plugin settings and have seen no change.
Builder content link
Builder public api key
b6235a23441d414d99a1a39a4bf6680d
Detailed steps to reproduce the bug
go to the editor, scroll to the bottom of the page. The Klaviyo form should be visible on the right.
Go to either View current draft or View live page and scroll to the bottom of the page. The form is not visible.
Viewing the Network tab in developer tools, the klaviyo script () is missing the company_id value. https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=QPTKLs
(QPTKLs missing on preview, live view and published view)
Screenshots or video link
Code stack you are integrating Builder with
NextJS, react
Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!
I’m having the same issue here with both the app integration with Klaviyo and using the embed code from Klaviyo - it is showing in the editor/preview but not once published
I ended up just creating a custom code block to load our Klaviyo forms based on desktop/mobile since we have a separate form for each and wanted to launch our site with forms.
<!-- Klaviyo Desktop/Mobile Form -->
<div id="klaviyo-form"></div>
<script>
const isDesktop = window.innerWidth > 991;
const formDiv = document.createElement('div');
formDiv.classList.add(`klaviyo-form-${isDesktop ? 'DESKTOP_ID' : 'MOBILE_ID'}`);
document.getElementById('klaviyo-form').appendChild(formDiv);
</script>
<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=CUSTOMER_ID"></script>
Hello @mtgoodrich and @vicky_kindra,
To fix the problem with the Klaviyo generic embed not publishing the company_id, you can attempt to manually update the company_id and form_id. I have created a loom video demonstrating the manual update process, which can be viewed at the following link:
We hope this helps!
Thanks,
Hi Manish, thank you for this! It looks good now on desktop but for some reason on mobile it is showing 2 email captures - do you know why?
https://get.ourkindra.com/5-reasons-to-try-this-vaginal-lotion
Best,
Vicky
Hello @vicky_kindra,
I reviewed your page. Are 2 emails captured on mobile when submitting the Klaviyo form?
Hello @vicky_kindra,
Please let us know if you are still experiencing issues with the Klaviyo embed.
Thank you,
Hi, sorry I realized it was an issue on my form, you can ignore this. Thank you!