Chat design interface

Design help General
1

I would like to create a custom-designed chat for a project where the user does not interact with the chat. The goal is to build it from scratch on Webflow, focusing on the design. However, I’m thinking about the animation, and I want the chat to scroll automatically. Any ideas on how I can do that easily?

Thank you for your help!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hi Mabelle, your description does not give much detail about how your chat system works. “Does not interact” means viewing-only, no chat facility at the receiver’s end?

Depending on the chat server you’re using to handle the communications and security, you might be able to get a feed that you can monitor, and write a client-side chat application that polls the feed, shows new content, and then scrolls to it in a part of your page.

3

Hello thank you for your feedback.

Yes exactly, we can’t interact with the chat. It is just the IA or chat server that is talking. I found servers that can do this but the problem is that we are limited for design.

I was thinking of creating the design and interaction by myself and have a chat that gives the information without the need of an external server. Do you know how to do this/ or have a tutorial on this?

Thank you

4

There are actually too many questions, choices, and solutions to point you in a specific direction, but you’re building one system with two parts - the server sending the notification and the browser or webpage receiving and displaying the notification.

These have to work together, so if you’ve already picked the server tech, start there.

But there are at least 4 general designs I see;

  • Web Push Notifications, which uses the browser itself. Can display notifications even if the user is not on that site. Requires the user’s permission. Difficult to setup on Webflow because you do not have direct access to change the manifest.json. Lots of service providers though, most paid and transactional.
  • Simple IFRAME refresh. Server is hosting a page of notifications, browser is just refreshing it in the page.
  • API polling. Similar, but server returns JSON, browser renders it however using JS.
  • Socket. Custom JS connects to the server, server publishes to the sockets, JS renders the alerts.

I’d start with Google to read up on general web chat and notification solutions, including custom builds.