> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to integrate Typeform [Typeform](https://www.typeform.com/) 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](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-alcoholic-bathunicorn_u86e3q.png) Typeform provides 6 main embedding options: 1. [Standard](#1-standard) 2. [Full-page](#1-full-page) 3. [Popup](#1-popup) 4. [Slider](#1-slider) 5. [Popover](#1-popover) 6. [Side tab](#1-side-tab) # Standard Use the Standard option to present a typeform seamlessly as part of your page. ![Standard option](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-alcoholic-bathunicorn_m7nnzq.png) #### Step 1/6 After you finish the necessary customization, click on **Share** tab. ![Sharing option](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-create-2566-_eu0hry.png) #### Step 2/6 On the left side of the page, select the **Embed in web page** option. ![Embedding options](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_11cb06n.png) Then, on the right side of the page, select the embed type. In this case Standard. ![Embedding types](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_h8o355.png) #### Step 3/6 Next, click on "Start Embedding". ![Press this button to get the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1g2st8t.png) Copy the code provided. ![Embedding code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_u2m4pd.png) #### Step 4/6 In Unicorn Platform, create a **Custom HTML** component. ![Custom HTML component](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_100xjkn.png) #### Step 5/6 Paste the embed code inside the component. ![Pasted embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_11q8j4g.png) #### Step 6/6 Wrap the embed code with these HTML tags to adjust the width of your survey: ```
Your embed code here
``` The whole code should look like this: ![Embed code wrapped with HTML tags](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1jpu5yc.png) #### 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](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-my-typeform-2566-09-1_4xgb7t.png) #### Step 1/6 After you finish the necessary customization, click on **Share** tab. ![Sharing option](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-create-2566-_eu0hry.png) #### Step 2/6 On the left side of the page, select the **Embed in web page** option. ![Embedding options](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_11cb06n.png) Then, on the right side of the page, select the embed type Full-page. ![Embedding types](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1giz38u.png) #### Step 3/6 Next, click on "Start Embedding". ![Press this button to get the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1yindlq.png) Copy the code provided. ![Embedding code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1s9e6an.png) #### Step 4/6 In Unicorn Platform, create a **Custom HTML** component. ![Custom HTML component](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_100xjkn.png) #### Step 5/6 Paste the embed code inside the component. ![Pasted embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1xolujb.png) #### 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. ![Use these lines to make the Typeform fill the whole page](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1a9aphw.png) #### 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](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-alcoholic-bathunicorn_f2gkfh.png) #### Step 1/7 After you finish the necessary customization, click on **Share** tab. ![Sharing option](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-create-2566-_eu0hry.png) #### Step 2/7 On the left side of the page, select the **Embed in web page** option. ![Embedding options](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_11cb06n.png) Then, on the right side of the page, select the embed type Popup. ![Embedding types](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_vpxclg.png) #### Step 3/7 Next, click on "Start Embedding". ![Press this button to get the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_8o8iqp.png) Scroll to the very end of the embed code and copy this part only: ![Copy this portion of the code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1jo63j.png) #### Step 4/7 Go to Unicorn Platform and paste the code into your **Website settings** > **Custom code** > ** custom HTML code** ![Unicorn Platform website settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_ohpfwl.png) #### Step 5/7 Go back to Typeform and copy this part of the code: ![Copy the selected part of the code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1swyere.png) #### Step 6/7 In Unicorn Platform, choose a button that will open your Typeform on click. Open this button's settings. ![Button settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1ndyaq5.png) Paste the code into **Settings** > **Attributes** field. ![Button attributes field](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_7yp5jx.png) #### Step 7/7 Paste this line of code into the button's URL field: `javascript:void(0);` ![Button URL field](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1fmiy01.png) 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](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-alcoholic-bathunicorn_1ih2jtn.png) #### Step 1/7 After you finish the necessary customization, click on **Share** tab. ![Sharing option](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-create-2566-_eu0hry.png) #### Step 2/7 On the left side of the page, select the **Embed in web page** option. ![Embedding options](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_11cb06n.png) Then, on the right side of the page, select the embed type Slider. ![Embedding types](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1tqc6lo.png) #### Step 3/7 Next, click on "Start Embedding". ![Press this button to get the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_1eeswu9.png) Scroll to the very end of the embed code and copy this part only: ![Copy this portion of the code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_12c82x3.png) #### Step 4/7 Go to Unicorn Platform and paste the code into your **Website settings** > **Custom code** > ** custom HTML code** ![Unicorn Platform website settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_ohpfwl.png) #### Step 5/7 Go back to Typeform and copy this part of the code: ![Copy the selected part of the code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_yvdwvn.png) #### Step 6/7 In Unicorn Platform, choose a button that will open your Typeform on click. Open this button's settings. ![Button settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1ndyaq5.png) Paste the code into **Settings** > **Attributes** field. ![Button attributes field](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_a0a2es.png) #### Step 7/7 Paste this line of code into the button's URL field: `javascript:void(0);` ![Button URL field](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1fmiy01.png) 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](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-alcoholic-bathunicorn_14rv6ov.png) #### Step 1/4 After you finish the necessary customization, click on **Share** tab. ![Sharing option](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-create-2566-_eu0hry.png) #### Step 2/4 On the left side of the page, select the **Embed in web page** option. ![Embedding options](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_11cb06n.png) Then, on the right side of the page, select the embed type Popover. ![Embedding types](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_e278ua.png) #### Step 3/4 Next, click on "Start Embedding". ![Press this button to get the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_14d4e2d.png) Copy the code provided. ![Embedding code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_qsjywx.png) #### Step 4/4 In Unicorn Platform, paste the code into the **Website settings** > **Custom code** > ** custom HTML code**. ![Unicorn Platform website settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_1acvumo.png) #### 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](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-alcoholic-bathunicorn_5g9efk.png) #### Step 1/4 After you finish the necessary customization, click on **Share** tab. ![Sharing option](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-create-2566-_eu0hry.png) #### Step 2/4 On the left side of the page, select the **Embed in web page** option. ![Embedding options](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_11cb06n.png) Then, on the right side of the page, select the embed type Side tab. ![Embedding types](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_19oviu3.png) #### Step 3/4 Next, click on "Start Embedding". ![Press this button to get the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_8fskc.png) Copy the code provided. ![Embedding code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-typeform-share-2566-0_mjfxs6.png) #### Step 4/4 In Unicorn Platform, paste the code into the **Website settings** > **Custom code** > ** custom HTML code**. ![Unicorn Platform website settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_9bql6r.png) #### Done! Save the page and open the live version of your website to see the result.