Chat buttons

Every way to reach you, in one place

Most people who want to contact a business give up if they have to hunt for the way to do it. This widget puts every route in one place: WhatsApp, Messenger, Telegram, a phone call, a text message, email or any link you like. It can sit in your page, or float in the corner of the window behind a small round launcher that opens it.

Set it up

1. Make a chat buttons widget. Sign in at dreamwidget.com/dashboard, press Chat buttons and give it a name for your own list.
2. Write a greeting. The editor opens on the Content tab. Greeting is the line above the buttons, something like "How would you like to reach us?". Leave it empty for buttons on their own.
3. Add your first way to reach you. Press Add Way to reach you, pick a Channel, and put your number, handle, address or link in the box under it. Each channel wants a slightly different thing, listed below.
4. Add the rest. Give each one Button text so a visitor can see at a glance what it is, for example "Message us on WhatsApp".
5. Press Save and Publish. Then copy the embed code from the Settings tab and paste it on your page. For buttons that float on every page, paste it into your website's header or footer template rather than into one page.

The channels

• WhatsApp. Your number in full international form, for example 15551234567, with no plus, spaces or dashes.
• Messenger. Your Facebook page name, the part that comes after facebook.com in your page address.
• Telegram. Your username without the at sign.
• Phone call. Your number. On a phone this dials it; on a desktop it opens whatever the visitor uses for calls.
• Text message. Your number, the same way.
• Email. Your email address.
• Any link. The full web address, starting with https://, for anything the list above does not cover: a booking page, a help desk, a form.

Prefilled message or subject starts the conversation for the visitor. On WhatsApp, Telegram and a text message it fills in the message; on email it fills in the subject line. Something like "Hello, I have a question about" saves a visitor the hardest part, which is the first sentence.

Button color, blank for the channel's own lets one button break from the others. Leave it empty and each button wears the color its own service is known by, which visitors recognize without reading.

In the page or floating

Where the buttons sit on your page, at the top of the Design tab, has three answers.

• In the page, where the code is pasted. The buttons behave like any other part of your page, which suits a contact page or the bottom of an article.
• Floating, bottom right of the window. A small round launcher sits in the corner and stays there while the visitor scrolls. Clicking it opens the buttons above it.
• Floating, bottom left of the window. The same thing on the other side.

The two floating choices need the embed code copied from this editor, script included, because it is that script that holds the launcher above your page. If you pasted an older embed without it, copy the code again from the Settings tab.

The launcher

Floating launcher is the round button in the corner, and every setting in that section acts only when the buttons float. Launcher size and Launcher corner radius set how big and how round it is, and turning the radius all the way up makes it a circle.

Launcher fill color and Launcher icon and text color are its two colors, and Shadow under the launcher lifts it off the page. Text beside the launcher icon, blank for none puts a word next to the icon, for example "Chat", which tells a visitor what it is before they click.

Distance from the side of the window and Distance from the bottom of the window move it away from the corner, which is how you keep it clear of anything your website already has down there.

The panel it opens has its own settings: Open panel width, Open panel corner radius, Open panel border color, Shadow under the open panel, and Space between the launcher and the open panel. Open the panel when the page loads shows the buttons straight away rather than waiting for a click.

The buttons

Button layout decides how they sit together. Stack the buttons in a column puts one under another, which is almost always right inside the floating panel. Turn it off for a row, which suits buttons sitting in the page. Align the buttons and Space between buttons do the rest, and Space under the greeting sets how far the first button sits below your line of welcome.

One fill color for every button, from the button fill below overrides each channel's own color and paints them all the same. Use it when the row of brand colors is too loud for your page. The button sections underneath then give you the fill, the text color, the stroke, the corner radius, the padding and the hover state, along with a library of ready made styles.

Desktop and Mobile

The editor has two screens, Desktop and Mobile. Every setting on the Design tab is kept once for each, and the buttons above the preview choose which one you are editing. A change lands on the screen you are looking at and nowhere else, unless you tick Edit all screens above the preview. A tablet is drawn from Desktop.

Your channels, numbers and wording are shared by every screen. What is usually worth setting separately is the launcher: a launcher sized for a desktop can be large on a phone, and the distance from the bottom of the window often needs more room there to clear a website's own bar.

Replay above the preview draws the widget again from the start, which closes the panel and puts the launcher back so you can see what a visitor sees first.

If something goes wrong

The buttons do not float. The embed code on your page is an older one without the script. Copy it again from the Settings tab and replace what you pasted.

WhatsApp opens but finds no number. The number needs to be in full international form with no plus, spaces or dashes: 15551234567, not +1 555 123 4567.

The launcher covers your own chat or cookie bar. Raise Distance from the bottom of the window, or move the buttons to the other side.

Nothing happens when a button is clicked. Check that the box under the channel is filled in. An empty number, handle or address gives a button with nowhere to go.

Anything else: hello@dreamwidget.com, and tell us the widget's name.