Floating chatbot use case - Fluid Topics - Latest

To add a floating Chatbot in the bottom-right of a Fluid Topics portal:

1. Open the Header designer.
2. Add a Modal component anywhere.

3. Give the Modal component the following CSS properties:

   right: 0px;
   bottom: 0px;
   position: fixed;
   margin: 30px;
   

4. Change the Modal icon to MESSAGE_BOT.

5. Style the icon.

   For example:

   --ft-icon-font-size: 50px;
   color: var(--ft-color-primary);
   background-color: white;
   padding: 30px;
   border-radius: 30px;
   border: 1px solid var(--ft-color-primary);
   

6. Open the modal.

7. Add a Chatbot component inside the Modal window.
8. Style the components.
9. Save and publish.

Result: