How I Integrated Live Chat into Gatsby with Tidio and Medusa
Tags: webdev, javascript, programming, opensource
Published: 2022-07-19 11:07:24

Live Chats on your ecommerce storefront allow you to communicate with your customers and provide them quick support. Whether they need help finding a specific product or understand how they can make a purchase, they can use the live chat feature on your ecommerce store to quickly chat with you.

[Medusa](https://github.com/medusajs/medusa) is an open source headless commerce platform packed with plenty of [ecommerce features](https://github.com/medusajs/medusa). One of Medusa’s biggest advantages is how easy it is to customize your technical stack and integrate it with third-party services.

In this tutorial, you’ll learn how to add live-chat functionality to your ecommerce store using [Medusa](https://medusajs.com/), [Tidio live chat](https://www.tidio.com/), and [Gatsby Storefront](https://github.com/medusajs/gatsby-starter-medusa).

## **Why Add Live-Chat to Your Ecommerce Store**

Some of the reasons that make live chat an important ecommerce feature:

- You get to interact with your customers online and in real-time to provide them with the best service.
- It drives more sales and leads. Using chatbots allows you to bring to customers' attention offers, promotions, and discounts that your store offers.
- It empowers your customer support team as they can answer any queries from the customers in real-time and help them out, avoiding issues and miscommunications.

## Why Use Medusa

As an open source platform, Medusa gives developers and businesses complete tech stack ownership. Developers also have the freedom to fully customize and extend the platform as fitting for the business use case.

This flexibility also translates into integrating third-party services and tools easily. You can integrate tools for live chat, analytics, notifications, payment providers, and more hassle-free.

## Why Use Tidio

Tidio is a service that allows you to add live-chat functionality to any website. Specifically for ecommerce use cases, it provides features such as [tracking abandoned carts](https://docs.tidio.com/docs/tracking_an_abandoned_cart/) and custom product templates to automate responses that drive more sales.

Tidio also provides merchants and customer support agents with an easy-to-use interface to customize the live-chat bot and communicate with customers. For each visitor, customer support agents can see important details such as their location or last viewed pages.

## Prerequisites

Before following along with this tutorial you need the following requirements:

- [Node.js](https://nodejs.org/en/) v14 or higher.
- A [Tidio](https://www.tidio.com/panel/register) account.

## **Set Up the Medusa Server**

Medusa provides a CLI tool to easily set up a Medusa server. To install the CLI tool run the following command:

```bash
npm install -g @medusajs/medusa-cli
```

Then, create a Medusa server using the following command

```bash
medusa new medusa-server-store --seed
```

This will create a new folder, `medusa-server-store` that hosts the medusa server files and code. The above command uses the `--seed` option. This adds dummy products and data to the Medusa server.

To run the server, change to the newly created directory `medusa-server-store` and run the server:

```bash
medusa develop
```

You can test your server by opening your browser and going to `localhost:9000/store/products`


![Server response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at8sdzchyn248gtfgcce.jpg)

## **Set Up the Gatsby Storefront**

To set up a Gatsby storefront, ensure you have the Gatsby CLI installed.

```bash
npm install -g gatsby-cli
```

You can then install the Gatsby storefront:

```bash
gatsby new gatsby-storefront https://github.com/medusajs/gatsby-starter-medusa
```

This will create a new directory `gatsby-storefront` that holds your storefront. Change to that directory.

Then, rename `.env.template` to  `.env.development`. This holds the environment variable `GATSBY_MEDUSA_BACKEND_URL` which by default is set to the server URL `http://localhost:9000`.

Finally, make sure that the Medusa server is running, then run the Gatsby storefront using the following command:

```bash
npm start
```

Open `http://localhost:8000/` in your browser. You’ll be able to browse all products and each product individually.


![Medusa Storefront](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzz8hzkijhiqzhuij7qj.jpg)

## **Set up Tidio for Developers**

After you register your Tidio account, configure the design of the live-chat including its color, name, and language.


![Configure live chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fl3l0kwwfv7qw3qj6n3.jpg)

After that, fill the form on the left with your details, then choose that you want to use Tidio for live chat:


![Choose I want a live chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t2f7m3rm30tqzlgql13.jpg)

Next, choose how you would like to engage your customers once they enter your store for the first time.


![Choose the chatbot engagement option you prefer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5id6bg8lxkwpimzm4zt4.jpg)

These messages are customizable. You can change them to your liking. You can change these settings later from the settings.

Finally, to Install the Tidio code on your store choose to “Show me the code”.


![Click on Show me the code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chfiu1gt2t8gu22oeuud.jpg)

Choose JavaScript from the list of platforms to integrate Tidio to. This gives you a script to add to your JavaScript project.


![JavaScript code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llfdbs9f1wwicxo4s9kd.jpg)

Copy this script and save it for later use. Finally, click **Continue** and head to your Tidio chat panel.

At this moment, you’ll see on the chat panel that ”**the chat code is not installed properly”**. This is because you haven't installed the chat code yet on a frontend app. In the next step, you will add the Tidio script to the Gatsby storefront.

## **Add Tidio Live-Chat to the Gatsby Storefront**

In the directory of your Gatsby storefront, import `src/pages/index.js` and import `Helmet` at the top of the file:

```jsx
import Helmet from "react-helmet"
```

[Helmet](https://www.npmjs.com/package/react-helmet) is a reusable React component exposed from the `react-helmet` library that is used to add elements to the `head` of a webpage. 

Then, add the `Helmet` component and the code snippet you copied from Tidio before the last closed `div` in the returned JSX of the component `IndexPage`:

```jsx
<Helmet>
	<script src="//code.tidio.co/<tidio code>.js" async></script>
</Helmet>
</div>
)
```

Finally, run the Gatsby storefront server again and the Medusa server if they’re not still running, and open the storefront again. You’ll see a new chat bubble at the bottom right.


![Chat Popup on storefront](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a8712yzctuozz9pya6f.jpg)

If you click the chat icon, a chat widget will be displayed. You can use the live chat to start chatting.


![Chat options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ttqgosjkijpq35zclvy.jpg)

You can verify that you have connected Tidio to your storefront by checking the Tidio chat panel. This will tell you whether the chat is correctly installed or not.


![Verify Tidio Setup on Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kwbtbig0t4g4owccez9.jpg)

## **Test it Out**

### As a Customer

You can test the live-chat feature by sending a message from your Gatsby storefront.


![Chat example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wku81ytokel0xjm73wda.jpg)

You’ll receive messages instantly when the store operator replies to your messages.

### As a Store Operator

When you open the Tidio panel, new conversations will be shown on the Conversions tabs. You can now join this conversation and chat with the customers.


![Store operator chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02ysbvbnaaoy6ic6x8rj.jpg)

Once you write to the customer, the customer will receive your response immediately, and you can engage with them based on the target conversation in realtime.


![Store operator chat example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j04f0cbl05a9vgml9jb5.jpg)

## **Conclusion**

Implementing live chat support on your site strengthens the trustworthiness of your company. You can give your customers real-time support and mitigate any issues early on.

You can integrate more services into Medusa for additional features including:

- [Stripe](https://docs.medusajs.com/add-plugins/stripe) as a Payment Provider.
- [Contentful](https://docs.medusajs.com/add-plugins/contentful) for advanced CMS functionalities.
- [SendGrid](https://docs.medusajs.com/add-plugins/sendgrid) for email notifications.

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).
>