Opening chat box in unique page area

Community Support
1

Is it possible to have chat box open on my landing page in a unique area of the webpage.

I want to duplicate this…

Thank You,

Anthony

2

Hi @BuyAntivirus ,

Do you want the chat widget to only show on a specific website page?

3

creat a new property and chose embed. then the chat will be embed to the website like you want.

4

On my landing page i want the chat box displayed but I want the original chat widget to display at the bottom right of the page on all other pages

5

Hi,

To confirm, would you like the chat widget in your landing area to be fully displayed, or do you want it maximized in your landing area while it stays closed on other pages?

1 Like
6

Thanks, this helped tremendously. One more thing please… How do I make this box responsive for mobile?

Thank in advanced,

Anthony

7

Hi,

May I know what exactly you are trying to achieve it on mobile?

8

I think it is already responsive for mobile. but you can try to apply CSS styles that adjust its positioning and size based on the screen width. To make the Tawk.to chat widget full-screen on mobile you can apply the following CSS:

css
@media (max-width: 768px) { /* Targets mobile devices */
  #tawk_60c30be97f4b000ac037075f {
    width: 100vw;  /* Full width */
    height: 100vh; /* Full height */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; /* Ensures it's on top */
    background: white; /* Optional: Prevents transparency issues */
  }
}
9

Thanks,
This worked for the sizing issue. But when I tried to scroll to see more content of the page it didn’t show…
I’m not a programmer so I copied and pasted your code into css (Elementor - wordpress).

I appreciate your effort and time. Hopefully you have another fix / extension to resolve.

Anthony

10

try adding

@media (max-width: 768px) { /* Targets mobile devices */
  #tawk_YOUR WIDGET CODE {
    width: 100vw;  
    height: 100vh; 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: white;
    overflow: auto; /* Enables scrolling inside the widget */
  }

  /* Allow the main page to remain scrollable */
  body {
    overflow: auto !important;
  }
}

overflow: auto; on #tawk_ YOUR WIDGET CODE → Ensures that if the chat content is taller than the screen, users can scroll within the chat. and overflow: auto !important; on `body → Ensures that the main page remains scrollable.

11

Hi,

We have escalated it to one of our development team and will get back to you as soon as we can.

12

Hi @BuyAntivirus

Our Dev team tested it and it is working.

They have some questions.

Can you please email us at support@tawk.to