For our frontend and Customer Support teams, it is not unheard that a customer would like to use the Nosto popup but containing some forms feeding data to some external platform.
This is because our popup comes with great segmenting and triggering features, but just an email collection's field; so if you want to gather more data from your customers, such as names, surnames or shopping preferences, Nosto's popup alone won't do.
One of the most requested forms to be placed in our popups is Klaviyo's: creating a form with it, and then embedding it in Nosto it will take you just a few minutes, but there are a few things to keep in mind.
The first starting point here is to have an embedded form ready in your Klaviyo account.
You don't have a form yet? Then in your Klaviyo account click first on "Signup & Forms" (step 1) and then "Build from scratch" (step 2)
Once this is done, give a name to the form, choose a list from the dropdown (the collected data will be going to this list) and then selected "Embed"
At this point, you will be able to create your Klaviyo form by dragging&dropping buttons and other elements as you prefer, giving spacing, changing colors - in other words: customize your form!
N.B. the design of the form itself will have to be decided in Klaviyo, as from our popup's CSS we don't have any safe way to manipulate the look&feel of the form. Whatever thing you change in this design preview will be reflected in the form inside the popup.
Disclaimer
Nosto's personnel should not be asked to enter your Klaviyo account to create the form you need. This is a job for you, your devs, your eCommerce manager or your Klaviyo's account manager.
Once you are done with the designing, you should be able to click on "Targeting and Behavior" and get this code
This will be the placeholder of the form, and Klaviyo will automatically fill it once the popup is loaded on the page.
Where should I place this code?
This should be place in lieu of the default Nosto form inside the popup, more precisely the Klaviyo placeholder should be replacing this whole block of code
After this operation, your popup's code will look like this:
N.B. a Klaviyo form that is set up on "Draft" will never be shown - you need to make sure your embedded form is "Live", as shown the picture below
This is it!
Now you can go ahead and preview the Nosto popup on your store before setting it live; unlike the Klaviyo form, the Nosto popup does not have to be live in order to be previewed.
Do you still have some questions? Then please reach out to us at support@nosto.com, we are happy to help!