Part 1: Creating a embeddable chat widget

Welcome to my first ever blogpost! This is going to be part 1 of a series in which I will walk you through creating a embeddable chat widget, you know, one of those things that will popup on a site by which you can talk to a sales representative or whatever.

The general idea, what will we make?

I'm doing this as part of my day-to-day job where we host numerous websites and offer support for customers that need help with issues or configuration of their site. Instead of them calling us or creating tickets in Zendesk I wanted to create a way for them to contact us using a chat widget that can be embedded in their website.

It will be a project consisting of three parts:

1. A socket server
2. A chat portal
3. A chat widget

Probably this is still a bit vague, but let me explain in more detail what I mean with each part.

The socket server

This will be the backbone of the project, a socket server that both the portal and widget will talk to. It will use a web technology called WebSockets. Using that we can send messages back and forth between the clients (using the widget) and the portal.

The chat portal

When someone opens up the chat widget and starts typing, a chat will appear in the chat portal (much like Whatsapp for example) and from there you can send messages back.

The chat widget

This will be a small project packed as a WebComponent which can be inserted on every website by just adding a script tag and a custom HTML element. For more information on web components you can start here

Now that we have an idea of what we will make, lets get into it!

Quick summary of tools and technologies

I am going to make this with the technologies I feel comfortable with, so here some of the tools we will be using:

• Vue (version 3)
• Quasar (Vue framework)
• Typescript
• Node.js (for the backend)
• Socket.io

And as an editor I will use VS Code.

Setting up the project

I first started writing this as a code along section, but a few steps in I came to my senses and asked myself who would enjoy this? I certainly would not, as the setup is basically all boilerplate code and project configuration so we can get cracking later on.

But it is fun (I think so atleast) to walk you around the boilerplate code and show you how I set up the project.

Get the code

The code for this series will be hosted here.

In that project I will create a branch for every part of this series. There is a branch part-1 which contains the end result of this part.

What is in it?

Here is a screenshot of the folder structure:

Let's break it down

Yarn workspaces - monorepo

I make use here of something called workspaces. You can use workspaces to create a monorepo, a repository hosting multiple projects. As our three parts are basically three different projects I decided it would be a good time to try this out. The folders portal, server and widget all contain their own projects, with their own typescript configuration (tsconfig.json) and own package.json. The dependencies however are installed on the root level.

This means that you only have to run yarn at root level once, to install the dependencies of all the projects, nice!

To make this work the root package.json contains these lines:

 "workspaces": [    "./portal",    "./server",    "./widget" ],

And to support typescript our root tsconfig.json contains these lines:

"references": [    { "path": "./portal" },    { "path": "./widget" },    { "path": "./server" }]

This means that every project can have it's own tsconfig.json and therefore it's own configuration.

Editor configuration

One thing crucial to a happy me (and hopefully every developer) is that the project you work in makes your life easier.

There are a lot of VS code extensions that do just that, and luckily you can include which extensions you use and their configuration inside a .vscode folder in every codebase.

When you loaded this project VS code probably asked/recommended you to install the recommended extensions. If you did not do that at that time, go to the extensions tab and filter on @recommended where you can do it manually.

There are a few things setup worth noting:

1. Code formatting using Prettier (on every save)
2. Code linting using ESLint (autofix on every save)

This means you don't have to worry about formatting files and VS Code will tell you if you are doing something wrong that can't be fixed automatically. Double yay!

Inside the portal folder

Inside the portal folder I created a starter project using Quasar. For those of you that don't know Quasar, check it out! In short, it can do everything! A large component library combined with build configurations for SSR, SPA, PWA and more.

You can create a boilerplate project using the CLI, just run

yarn create quasar

Which will ask you some questions about the sort of project you want to create. For those who are interested, here is what I filled in:

 What would you like to build?  App with Quasar CLI, let's go! Project folder: ... portal Pick Quasar version:  Quasar v2 (Vue 3 | latest and greatest) Pick script type:  Typescript Pick Quasar App CLI variant:  Quasar App CLI with Vite (BETA stage) Package name: ... portal Project product name: (must start with letter if building mobile apps) ... Chat portal Project description: ... A Quasar Project Author: ... _______________ Pick a Vue component style:  Composition API Pick your CSS preprocessor:  Sass with SCSS syntax Check the features needed for your project:  ESLint, State Management (Pinia) Pick an ESLint preset:  Prettier

I moved some ESLint and Prettier configuration from this boilerplate to the root level and did some tsconfig.json changes but other than that the code is as is.

Inside the server folder

In here I setup a single index.ts file with the most basic express application, it only tells you that it is running, not much more. But that is not the point for this part :)

Inside the widget folder

This one I had to research a bit. I figured there must be someone that has done something like this before, and after stumbling upon vite community templates I quickly found what I was looking for: a webcomponent vite template

I added this template to this folder and did some changes to tsconfig.json and vite.config.ts to make it work for my use case, no sweat!

Running and building

The last thing I setup was creating a scripts section inside the root package.json that will build and run the different parts. Either separately or at once, whatever is your preference. Go take a look, I think it is quite self explanatory.

As a quick tip, you can also use the npm scripts section inside the Explorer tab to quickly run the scripts you want. Here:

Wrapping up

That's it for this part! Maybe you are a bit disappointed because we did not get to some real coding yet, but stay tuned for the next part where that certainly will be the case.

Also, feedback and reactions are welcome! As this is my first post, I would like to know what I can improve

See you next time!