Articles on: Widgets and integrations

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 survey in Unicorn Platform

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.

Standard option

Step 1/4



After you finish the necessary customization, click on Get the code button and copy the provided code snippet.

Press this button to get the embed code

Step 2/4



In Unicorn Platform, create a Custom HTML component.

Custom HTML component

Step 3/4



Paste the embed code inside the component.

Pasted embed code

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:

Embed code wrapped with HTML tags

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.

Full-page option

Step 1/5



After you finish the necessary customization, click on Get the code button and copy the provided code snippet.

Press this button to get the embed code

Step 2/5



In Unicorn Platform, create a Custom HTML component.

Custom HTML component

Step 3/5



Paste the embed code inside the component.

Pasted embed code

Step 4/5



In the code, replace height: 100% with height: 100vh

Use this line instead of &quot;height: 100%&quot;

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.

Replace the default component ID with the one on top

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.

Popup option

Step 1/5



After you finish the necessary customization, click on Get the code button. Copy this part only:

Copy this portion of the code

Step 2/5



Go to Unicorn Platform and paste the code into your Website settings > Custom code > <body>

Unicorn Platform website settings

Step 3/5



Go back to Typeform and copy this part of the code:

Copy the selected 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.

Button settings

Paste the code into Settings > Attributes field.

Button attributes field

Step 5/5



Paste this line of code into the button's URL field: javascript:void(0);

Button URL field

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.

Slider option

Step 1/5



After you finish the necessary customization, click on Get the code button. Copy this part only:

Copy this portion of the code

Step 2/5



Go to Unicorn Platform and paste the code into your Website settings > Custom code > <body>

Unicorn Platform website settings

Step 3/5



Go back to Typeform and copy this part of the code:

Copy the selected 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.

Button settings

Paste the code into Settings > Attributes field.

Button attributes field

Step 5/5



Paste this line of code into the button's URL field: javascript:void(0);

Button URL field

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.

Popover option

Step 1/2



After you finish the necessary customization, click on Get the code button and copy the provided code snippet.

Press this button to get the embed code

Step 2/2



In Unicorn Platform, paste the code into the Website settings > Custom code > <body> section.

Unicorn Platform website settings

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.

Side tab option

Step 1/2



After you finish the necessary customization, click on Get the code button and copy the provided code snippet.

Press this button to get the embed code

Step 2/2



In Unicorn Platform, paste the code into the Website settings > Custom code > <body> section.

Unicorn Platform website settings

Done!



Save the page and open the live version of your website to see the result.

Updated on: 01/04/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!