Social Chat 

Social Chat 

Welcome to the “Social Chat” documentation. Looking to integrate Social Chat into your website? Our block allows you to create engaging chat experiences that enhance user engagement and interaction. In this guide, we'll show you how to use the editor to customize your social chat block.

Step 1 : Open the Editor
Step2 : Customize The Content 
Step 3 : Configure Settings
Step 4 : Choose Colors
Step 5 : Preview 





Step 1 : Open the Editor

1. Go to Social Chat template.
2. Click on "Edit" after choosing your template.

class="" alt="">



Step 2: Customize the content


1. In this panel, you can easily, add or remove chat buttons as needed.


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



2. Customize each one by adding the social URL. You can also choose each chat colors


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




Step 3: Configure settings


In our social chat block, we offer two distinct styles, each with its own settings panel. Let's explore how they function.


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




1. For the first style :

  •  Begin with the "View" section where you can choose the chat's position, adjust its roundness, select the text style, and add title for the buttons. Also, you can enable or disable the auto-prompt.


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



  • Choose to show or hide the header. Then provide the name of the person chatting with your users and specify his status.


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



  • Also, you have the option to upload his profile image and select its position. 


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


  • Regarding the buttons, you can adjust their roundness, add labels to them , and choose whether they should appear in full style or not.


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



  •  Customize the floating button by adjusting its roundness, selecting an icon, adding a label to it and specify its size.


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



    2. For the second style, you only need to adjust the roundness of the buttons and select the bubble icon.


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




    Step 4: 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 5: Preview


    Lastly, you can click on “Preview” to see how your Social Chat 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="">