Build an animated chat inside a phone screen to paste
A way to explain a service on your website without a paragraph of text. It creates a phone screen with a WhatsApp chat that plays by itself, complete with a typing animation. You write the messages, choose who sends each one, change the chat name, background, and speed. The output is a standalone HTML snippet to paste into any site or a React component file. Everything runs in the browser, with no libraries and no build step. Please note that this is a marketing display with pre-written messages, not a chatbot or a real connection to WhatsApp.
No. This is a display only, the messages are written in advance and nobody actually receives them. To allow real inquiries, add a floating WhatsApp button next to it that opens a chat with your number.
The current snippet is designed for one chat per page, because it identifies the message area using a fixed ID. For two chats on the same page, you need to change the ID in the second code snippet.
The animation is standard CSS, so a single rule on your site can turn it off along with the rest of your animations.
Standalone HTML is a single snippet you paste into any site. React is a component file for an existing project, which means you also need to paste the CSS from the dedicated tab.
Klix could not load
Try reloading the page first. If a new version just went out, a reload fixes it straight away.
If reloading did not help, your browser may be too old. Klix runs the tools on your own device rather than on a server, so it needs a browser from 2022 or later. What to do: update Chrome or Firefox, then open klixtools.com again.