How to install a live chat widget without breaking the layout

A live chat widget should feel like part of the site: one launcher, no extra toolbar, no layout jump. ChatDix does that with a single script per connected website. This is the install that actually works.

Put it in the template, not on one landing page

If you only paste the snippet on the homepage, every other URL is mute. Support questions happen on pricing, docs, and checkout. Add the script to the global footer or root layout so the launcher follows the visitor.

Single-page apps

React, Vue, and similar apps destroy DOM that is not in the persistent shell. Mount the snippet next to the root layout, not inside a route component that unmounts. If the bubble vanishes on navigation, you nested it too deep.

Style in the product

Do not override the widget with aggressive site CSS. ChatDix exposes header, launcher, bubbles, and type in the project settings. Fighting z-index in your theme is how launchers end up under sticky headers. Raise the widget or lower the header; pick one.

When nothing shows

Check the project id, that widget.js loads in the network panel, ad blockers, and Content-Security-Policy. Then send a test chat from a private window. The inbox is the source of truth — if the message arrives, the widget is live even if you disliked the color.

Full product steps: widget page. Create a workspace: start free.