TikTok Feed

TikTok Feed

Welcome to the “TikTok Feed” documentation. Looking to integrate TikTok Feed into your website? Our block allows you to seamlessly showcase your TikTok content and engage your audience. In this guide, we'll show you how to use the editor to customize your TikTok Feed block.

Step 1 : Open the Editor
Step 2 : Connect To Your Tiktok Account
Step 3 : Adjust The Layout
Step 4 : Configure Settings
Step 5 : Personalize Cards
Step 6 : Choose Colors
Step 7 : Preview



Step 1 : Open the Editor

1. Go to Tiktok Feed template.
2. Click on "Edit" after choosing your template.

class="" alt="">



Step 2: Connect to your TikTok account


Begin by connecting to your TikTok account:

1.First, click on the "Continue with TikTok" button.


class="flex justify-center items-start h-auto w-96 h-auto " alt="">



2. After logging in, you can either proceed directly with your current account or edit access first.


class="flex justify-center items-start h-auto w-auto" alt="">



3. Now that you're successfully connected, you have the option to reload the feed or deauthorize as needed.


class="flex justify-center items-start h-auto w-auto" alt="">




Step 3: Adjust the Layout


1. In this panel, you have the option to choose how to display your layout, either as a carousel, grids, masonry or list.


class="flex justify-center items-start h-auto w-96" alt="">



2. For each layout type, you can customize specific options. For example, you can adjust the gap between cards, and specify the number of columns and rows.
For the carousel, you can customize the autoplay delay, set the maximum number of items to appear, decide whether to enable the loop, and choose whether to display dots and controls.
In other cases, you can define the button label, adjust its roundness, and customize its border.


class="flex justify-center items-start h-auto w-auto" alt="">




Step 4: Configure settings :


In the settings panel, easily adjust the spacing around the block by customizing the margin and padding. You also have the option to open links in a new tab.


class="flex justify-center items-start h-auto w-96" alt="">




Step 5: Personalize cards


In the card panel, you have control over various aspects:
1. Choose the image position and select the action that occurs when the post is clicked.


class="flex justify-center items-start h-auto w-96" alt="">



2. In the "Props" section:
  •  If you've chosen the top or bottom image position in the preview section, specify Image height, border style, shadow, roundness, choose to display a short, full, or scroll description, and write the label for the "more" button. 


    • class="flex justify-center items-start h-auto w-auto" alt="">



  •  If you choose the cover image , you can do the same as the top or bottom image. Additionally, you can opt to show an overlay over the card and adjust its opacity.


    • class="flex justify-center items-start h-auto w-auto" alt="">



    3. In this section, you can opt to show or hide each card's content.


    class="flex justify-center items-start h-auto w-80" alt="">




    Step 6: Choose Colors


    Within this panel, you can select colors that match your website's design.


    class="flex justify-center items-start h-auto w-80" alt="">




    Step 7: Preview


    Lastly, you can click on “Preview” to see how your TikTok feed block looks on both desktop and mobile devices. After this, you can proceed to the next step.

    class="flex justify-center items-start h-auto w-auto" alt="">