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 Share tab.
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type. In this case Standard.
Next, click on "Start Embedding".
Copy the code provided.
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 Share tab.
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Full-page.
Next, click on "Start Embedding".
Copy the code provided.
In Unicorn Platform, create a Custom HTML component.
Paste the embed code inside the component.
In the embedding code, in the highlighted areas shown in the screenshot, add lines #wraper {height: 70vh !important;} and id="wraper". This will make the typeform fill the whole page.
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 Share tab.
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Popup.
Next, click on "Start Embedding".
Scroll to the very end of the embed code and copy this part only:
Go to Unicorn Platform and paste the code into your Website settings > Custom code > </body> custom HTML code
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 Share tab.
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Slider.
Next, click on "Start Embedding".
Scroll to the very end of the embed code and copy this part only:
Go to Unicorn Platform and paste the code into your Website settings > Custom code > </body> custom HTML code
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 Share tab.
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Popover.
Next, click on "Start Embedding".
Copy the code provided.
In Unicorn Platform, paste the code into the Website settings > Custom code > </body> custom HTML code.
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 Share tab.
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Side tab.
Next, click on "Start Embedding".
Copy the code provided.
In Unicorn Platform, paste the code into the Website settings > Custom code > </body> custom HTML code.
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/6
After you finish the necessary customization, click on Share tab.
Step 2/6
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type. In this case Standard.
Step 3/6
Next, click on "Start Embedding".
Copy the code provided.
Step 4/6
In Unicorn Platform, create a Custom HTML component.
Step 5/6
Paste the embed code inside the component.
Step 6/6
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/6
After you finish the necessary customization, click on Share tab.
Step 2/6
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Full-page.
Step 3/6
Next, click on "Start Embedding".
Copy the code provided.
Step 4/6
In Unicorn Platform, create a Custom HTML component.
Step 5/6
Paste the embed code inside the component.
Step 6/6
In the embedding code, in the highlighted areas shown in the screenshot, add lines #wraper {height: 70vh !important;} and id="wraper". This will make the typeform fill the whole page.
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/7
After you finish the necessary customization, click on Share tab.
Step 2/7
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Popup.
Step 3/7
Next, click on "Start Embedding".
Scroll to the very end of the embed code and copy this part only:
Step 4/7
Go to Unicorn Platform and paste the code into your Website settings > Custom code > </body> custom HTML code
Step 5/7
Go back to Typeform and copy this part of the code:
Step 6/7
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 7/7
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/7
After you finish the necessary customization, click on Share tab.
Step 2/7
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Slider.
Step 3/7
Next, click on "Start Embedding".
Scroll to the very end of the embed code and copy this part only:
Step 4/7
Go to Unicorn Platform and paste the code into your Website settings > Custom code > </body> custom HTML code
Step 5/7
Go back to Typeform and copy this part of the code:
Step 6/7
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 7/7
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/4
After you finish the necessary customization, click on Share tab.
Step 2/4
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Popover.
Step 3/4
Next, click on "Start Embedding".
Copy the code provided.
Step 4/4
In Unicorn Platform, paste the code into the Website settings > Custom code > </body> custom HTML code.
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/4
After you finish the necessary customization, click on Share tab.
Step 2/4
On the left side of the page, select the Embed in web page option.
Then, on the right side of the page, select the embed type Side tab.
Step 3/4
Next, click on "Start Embedding".
Copy the code provided.
Step 4/4
In Unicorn Platform, paste the code into the Website settings > Custom code > </body> custom HTML code.
Done!
Save the page and open the live version of your website to see the result.
Updated on: 13/09/2023
Thank you!