Discover the best chat websites created by professional designers. Get inspired and start planning your perfect chat web design today!

A website for a health tech startup Sonde. Made this one to try ourselves in a biotech design style. We made this project cloneable, so you can check out how we done or reuse some cool effects with animation!

Sonde Health

I recently came across the tutorial on Webflow University regarding "how to add a WhatsApp chat widget to your webflow projects" realising that I didn't want to pay the $5 a month fee for Elfsight I had a look at what it was doing and it really wasn't doing very much.

Installation: Copy and paste or clone this project, if you copy and paste you will need to recreate the interactions.

Also include the following script into your project custom code (before Body close:

<script>
$(document).on('click', '#close-chat', function(event) { 
    event.preventDefault(); 
    $("#whatsapp-button").click(); 
});
</script>

This will prevent the close button from performing its default action, so you can manage the open and close through one interaction.

Finally, to connect your whatsapp account, just change the link on the "Start WhatsApp chat" button with your telephone / Whatsapp number:

https://api.whatsapp.com/send?phone=+ADDNUMBERHERE

Free - WhatsApp Widget

Free Whatsapp Chat Widget

Memberstack

Had some fun creating a 100% Webflow contact form/chat widget. 

Add your profile pics, link out to your socials, and you're good to go! I even added a few Memberstack data attributes so it'll auto-fill for returning users. 

You'll want to tweak the open/close button once you hide the "Made in Webflow" label.

Chat Widget

Webflow Contact Widget

We've made this special project because ZOOM is everything now! 

Look at it as our design experiment and a tribute to what's going on in the world spring 2020. 

It's now cloneable, so enjoy this fun website with some cool lottie animations.

ZOOM

Zoom x Embacy

A contact form disguised as a chat widget.

Explanation and more here:
https://www.tiny-resources.com/elements/contact-form-chat-widget

Contact form chat widget

Contact form as a Chat widget

A new logo, new image and new website for our little web design service. We went through several iterations for this finalized design. We came across a few obstacles along the way during the design and development process which resulting in removing a lot of ideas implemented. The major issue with the fallback is performance drop caused by complex interactions, hidden heavy content elements, overlapping bugs, etc.

Eventhough the end result is not as expected, but it came out fine. (Well, at least it works.) Also, along the process, we discovered several bugs, do's and dont's, the possibilities, and new ideas. It has been fun creating this site.

If anyone has feedback or inquiry, feel free to drop me a message. =)

Lastly, have fun building websites.

SketchzLab

SketchzLab Official Site - Renewal

Install a simple chat widget on your website so your customers can get in touch with you via WhatsApp, Telegram, Messenger, Email, or in any other platform.

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://livechat-cloneable-brixtemplates.webflow.io/

• Click 'Clone project' to get a clone on your Webflow account

• Get the cloneable Figma file to customize the styling and graphics: https://www.figma.com/community/file/1085644848079162476

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

17. Live Chat | Webflow Cloneable

Live Chat Webflow Cloneable Template - BRIX Templates

Check out a demo project for Memberchat - a nocode chat for your website members to talk with each other!
It works perfectly with Webflow and Memberstack and you can setup that in minutes on your own website.

Memberchat Demo

Chat between members: Memberchat

Present a video presentation to your users natively in Webflow

- Background video (set up using HTML embed so you can hook it up to the CMS)
- Widget bottom right, can easily be repositioned
- Opens natively with Webflow interactions
- 3 feedback forms
- Video player
- X to hide it

Almost fully responsive. Have had it lying around for 3 years now to finish it, but hasn't happened yet so decided to share it now.

Feel free to build upon it and use for your projects.

Video chat

Video chat widget, cloneable

A contact form bubble you can copy and paste in your projects. Mobile ready.

The second page of the project will allow you to visually edit the chat header text and pictures, via a symbol approach.

---------------------------

BTW, you are welcome to show your support by subscribing to my channel:

https://www.youtube.com/channel/UCOpQffrF5Y79_fWGSXfBqDw

Chat BBQ

Cloneable chat-like contact bubble

Outseta

Outseta and Webflow are the only tools you need to launch and grow a fully functioning membership or subscription business. This site demonstrates how the tools can be integrated—all without writing code!

Outseta & Webflow Demo Site (old)

Outseta & Webflow Demo Site

MainWallet is a Telegram payment service. So we based our design around Telegram messenger chat. Animations by click illustrate complicated operations in an easy way.

MainWallet English

MainWallet

Earnity is a social platform for crypto investors.  They hired me to make performance improvements to their beautiful header "coin-flip" animation (trimming it from hundreds of lines of code to 15), create the iMessage chat-style interactions, and renovate the site's foundations to make the site responsive to all screen sizes.

Earnity Showcase

Earnity: Crypto, Together

ViDesigns

🚀 Made using Formly: http://tryformly.com/

A fully responsive chat styled multistep form using Formly.

Inspired by: https://dribbble.com/shots/21097494-Hellorep-ai-onboarding-experience

Please note that this cloneable uses:
- A FormlyPro feature: Get Input Data
- Custom code: GSAP, CSS styling and misc JS code
- Finsweet Range Slider

Formly - Chat Style Multistep Form

⚡️ Formly - Chat Style Form

Präsentation mit Interior Design und Mediadesign.

pK-relaunch

pk-relaunch

Instant messaging. Frictionless sales.

QuickChat is an instant messaging tool that connects prospects directly to real salespeople, that’s it.
No bots. Nothing to download.

Quickchat

QuickChat

The Voice and Chatbot that automates your customer contact phone calls, chats and emails in any language and 24/7.

Discover chat websites built by the Webflow community

Discover chat websites built by the Webflow community