Engage your visitors with interactive user-generated TikTok video posts by embedding them on your website's home page and product-display pages (PDP). Tag products to ensure the right UGC post appear on the tagged product pages for better user experience. The process is divided into two parts:<ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Create a collection of TikTok videos</li><li value="2" class="PlaygroundEditorTheme__listItem">Embed the collection on your website pages</li></ol> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">to create a collection of tiktok videos: </h2> 1. Go to Collection &gt; All Collections to open the Collection page. Here, you can edit an existing collection or create a new one from scratch. For this guide, we will proceed with a new collection. 2. Click Add on the top right to open the Add Feed overlay. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702792995673.png?alt=media" alt="image.png" width="inherit" height="inherit"> 3. In the Add Feed overlay, a. Select the source as TikTok from the list of available options.b. Select a mode of fetching posts, i.e., Hashtag or Username.c. Type in your keyword related to the posts you want to collect. E.g. adidasfootball. Click the search icon and select a keyword from the results.d. Click Add to finish. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702793712906.png?alt=media" alt="image.png" width="inherit" height="inherit"> Sit back and relax while the Idukki magic sauce will do the work for you. Once the process is complete, you will land at the Manage Collection page. Learn how to edit your collection here. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">to embed your collection on Homepage and pdp</h3> 1. 1. Click Publish on the top right. You will receive a prompt to curate your feed or directly proceed to the Publish Collection page. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702794038194.png?alt=media" alt="image.png" width="inherit" height="inherit"> For this guide, we will select the Publish option. You can learn about different curating options <a href="https://help.idukki.io/articles/how-to-curate-collections-on-idukki-38ed40-4f3bb" rel="noreferrer" class="PlaygroundEditorTheme__link">here</a>. <blockquote class="PlaygroundEditorTheme__quote" dir="ltr">Tip: You can enhance customer experience and save space on your homepage and PDP bu embedding widget as stories. <a href="https://help.idukki.io/articles/how-to-add-stories-widget-on-home-page-and-pdp-38ed40-523d1" rel="noreferrer" class="PlaygroundEditorTheme__link">Learn more</a>.</blockquote> 2. Click Publish and select Embed on a website from the dropdown. The Publish Collection overlay will open. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702790504817.png?alt=media" alt="image.png" width="inherit" height="inherit"> 3. In the overlay, you have to follow the 4-step process: a. Select the platform on which you want to embed the collection. E.g. Shopifyb. Copy the code to clipboard. <blockquote class="PlaygroundEditorTheme__quote" dir="ltr">You can either embed the collection yourself or email instructions to your developer using the Send to Developer option.</blockquote> c. If you decide to do it yourself, next, you have to add your domain name. Save changes and proceed. d. The final step is to paste the code in the backend of your page where you want to display the collection. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_idukki_publishcollection_video.1702791247438.gif?alt=media" alt="Idukki_PublishCollection_Video.gif" width="inherit" height="inherit"> Don't forget you can always preview your collection using the Preview option. It will open in a new tab. <h3 class="PlaygroundEditorTheme__h3"> </h3>

Engage your visitors with interactive user-generated TikTok video posts by embedding them on your website's home page and product-display pages (PDP). Tag products to ensure the right UGC post appear on the tagged product pages for better user experience.

The process is divided into two parts:

1. Create a collection of TikTok videos
2. Embed the collection on your website pages

## to create a collection of tiktok videos:

****1\.****Go to Collection > All Collections to open the Collection page. Here, you can edit an existing collection or create a new one from scratch.

For this guide, we will proceed with a new collection.

****2.****Click****Add****on the top right to open the Add Feed overlay.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702792995673.png?alt=media)

****3\.****In the****Add Feed****overlay,

****a.****Select the****source****as TikTok from the list of available options.

****b.****Select a****mode****of fetching posts, i.e., Hashtag or Username.

****c.****Type in your****keyword****related to the posts you want to collect. E.g. adidasfootball. Click the****search****icon and select a keyword from the results.

****d.****Click****Add****to finish.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702793712906.png?alt=media)

**Sit back and relax while the Idukki magic sauce will do the work for you. Once the process is complete, you will land at the** *****Manage Collection***** **page. Learn how to edit your collection here.**

### to embed your collection on Homepage and pdp

****1\. 1.****Click****Publish****on the top right. You will receive a prompt to curate your feed or directly proceed to the****Publish Collection****page.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702794038194.png?alt=media)

**For this guide, we will select the** *****Publish***** **option. You can learn about different curating options**[**here**](https://help.idukki.io/articles/how-to-curate-collections-on-idukki-38ed40-4f3bb)**.**

> **Tip: You can enhance customer experience and save space on your homepage and PDP bu embedding widget as stories.**[**Learn more**](https://help.idukki.io/articles/how-to-add-stories-widget-on-home-page-and-pdp-38ed40-523d1)**.**

****2\.****Click****Publish****and select****Embed on a website****from the dropdown. The Publish Collection overlay will open.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_image.1702790504817.png?alt=media)

****3\.****In the overlay, you have to follow the 4-step process:

****a.****Select the platform on which you want to embed the collection. E.g. Shopify

****b.****Copy the code to clipboard.

> **You can either embed the collection yourself or email instructions to your developer using the** *****Send to Developer***** **option.**

****c.****If you decide to do it yourself, next, you have to add your domain name. Save changes and proceed.

****d.****The final step is to paste the code in the backend of your page where you want to display the collection.

![Idukki_PublishCollection_Video.gif](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/38ed40_idukki_publishcollection_video.1702791247438.gif?alt=media)

**Don't forget you can always preview your collection using the** *****Preview***** **option. It will open in a new tab.**

How to Add Tik Tok Videos to Home Page and PDP

Set up your account and create your first collection in Idukki

Was this article helpful?