How to integrate Typeform
Typeform is a service for creating multi-step forms and surveys. In this guide, you will learn how to embed your typeforms into Unicorn Platform.
Typeform provides 6 main embedding options:
Standard
Full-page
Popup
Slider
Popover
Side tab
Use the Standard option to present a typeform seamlessly as part of your page.
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
In Unicorn Platform, create a Custom HTML component.
Paste the embed code inside the component.
Wrap the embed code with these HTML tags to adjust the width of your survey:
The whole code should look like this:
Save the page and open the live version of your website to see the result.
Use this option to show people a full-page typeform when your site loads.
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
In Unicorn Platform, create a Custom HTML component.
Paste the embed code inside the component.
In the code, replace height: 100% with height: 100vh
This will make the typeform fill the whole page.
Add the following code next to the embed code. It will make your survey fit the page perfectly 👌
Replace #other-01-741721 with the current Custom HTML component's ID.
Save the page and open the live version of your website to see the result.
Use this option to make your typeform pop up in the center of the screen.
After you finish the necessary customization, click on Get the code button. Copy this part only:
Go to Unicorn Platform and paste the code into your Website settings > Custom code > <body>
Go back to Typeform and copy this part of the code:
In Unicorn Platform, choose a button that will open your typeform on click. Open this button's settings.
Paste the code into Settings > Attributes field.
Paste this line of code into the button's URL field: javascript:void(0);
It will prevent the button from opening another page on click.
Save the page and open the live version of your website to see the result.
Use this option to make the full-size typeform slide in from the side.
After you finish the necessary customization, click on Get the code button. Copy this part only:
Go to Unicorn Platform and paste the code into your Website settings > Custom code > <body>
Go back to Typeform and copy this part of the code:
In Unicorn Platform, choose a button that will open your typeform on click. Open this button's settings.
Paste the code into Settings > Attributes field.
Paste this line of code into the button's URL field: javascript:void(0);
It will prevent the button from opening another page on click.
Save the page and open the live version of your website to see the result.
Use this option to open the typeform as a floating popover when someone hits the button.
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
In Unicorn Platform, paste the code into the Website settings > Custom code > <body> section.
Save the page and open the live version of your website to see the result.
Use this option to open the typeform as a floating panel when someone hits the button.
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
In Unicorn Platform, paste the code into the Website settings > Custom code > <body> section.
Save the page and open the live version of your website to see the result.
Typeform provides 6 main embedding options:
Standard
Full-page
Popup
Slider
Popover
Side tab
Standard
Use the Standard option to present a typeform seamlessly as part of your page.
Step 1/4
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
Step 2/4
In Unicorn Platform, create a Custom HTML component.
Step 3/4
Paste the embed code inside the component.
Step 4/4
Wrap the embed code with these HTML tags to adjust the width of your survey:
<div class="container">
Your embed code here
</div>The whole code should look like this:
Done!
Save the page and open the live version of your website to see the result.
Full-page
Use this option to show people a full-page typeform when your site loads.
Step 1/5
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
Step 2/5
In Unicorn Platform, create a Custom HTML component.
Step 3/5
Paste the embed code inside the component.
Step 4/5
In the code, replace height: 100% with height: 100vh
This will make the typeform fill the whole page.
Step 5/5
Add the following code next to the embed code. It will make your survey fit the page perfectly 👌
<style>
#other-01-741721 .page-component__wrapper {
padding: 0 !important;
}
</style>Replace #other-01-741721 with the current Custom HTML component's ID.
Done!
Save the page and open the live version of your website to see the result.
Popup
Use this option to make your typeform pop up in the center of the screen.
Step 1/5
After you finish the necessary customization, click on Get the code button. Copy this part only:
Step 2/5
Go to Unicorn Platform and paste the code into your Website settings > Custom code > <body>
Step 3/5
Go back to Typeform and copy this part of the code:
Step 4/5
In Unicorn Platform, choose a button that will open your typeform on click. Open this button's settings.
Paste the code into Settings > Attributes field.
Step 5/5
Paste this line of code into the button's URL field: javascript:void(0);
It will prevent the button from opening another page on click.
Done!
Save the page and open the live version of your website to see the result.
Slider
Use this option to make the full-size typeform slide in from the side.
Step 1/5
After you finish the necessary customization, click on Get the code button. Copy this part only:
Step 2/5
Go to Unicorn Platform and paste the code into your Website settings > Custom code > <body>
Step 3/5
Go back to Typeform and copy this part of the code:
Step 4/5
In Unicorn Platform, choose a button that will open your typeform on click. Open this button's settings.
Paste the code into Settings > Attributes field.
Step 5/5
Paste this line of code into the button's URL field: javascript:void(0);
It will prevent the button from opening another page on click.
Done!
Save the page and open the live version of your website to see the result.
Popover
Use this option to open the typeform as a floating popover when someone hits the button.
Step 1/2
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
Step 2/2
In Unicorn Platform, paste the code into the Website settings > Custom code > <body> section.
Done!
Save the page and open the live version of your website to see the result.
Side tab
Use this option to open the typeform as a floating panel when someone hits the button.
Step 1/2
After you finish the necessary customization, click on Get the code button and copy the provided code snippet.
Step 2/2
In Unicorn Platform, paste the code into the Website settings > Custom code > <body> section.
Done!
Save the page and open the live version of your website to see the result.
Updated on: 01/04/2022
Thank you!