# Meet even the toughest design guidelines with Cognigy’s webchat

1 min read

.png)

Media contact: [Alexander Teusz](/content/news/author/alexander-teusz/index.html) October 18, 2019

---

If you have ever started a self-service bot project, you might have hit this roadblock: Your bot is great and now you “just” want to embed it into your website.

This means facing the websites gatekeepers: Marketing, Corporate Comms and the Web teams have design standards and you will quickly learn that “…but I can adopt the colors & logo to our guidelines…” just won´t cut it.  That is where the majority of the webchats on the market will fail and expensive non-planned development will start.

Cognigy already provides quite a number of options for our webchat widget, but with release 2.9.0 we have increased it to nearly 30 different parameters to tweak:

- Widget Colors
- Fonts & Font Colors
- Buttons
- Input & Output style
- Avatars
- …and much more

**Here a quick tech overview:**

We provide you two options to support your requirements:

1. CSS file
2. <style> tags within the html file

There are just a few steps to take for making your webchat look like an alien space shuttle conversation tool. E.g.

Our tutorial below will walk through all the steps you need to get the result shown above.

1. **Download the Webchat Repository from GitHub:**
   
   _git clone_ [_https://github.com/Cognigy/WebchatWidget.git_](https://github.com/Cognigy/WebchatWidget.git) _custom-webchat_
2. **Navigate to the custom-webchat folder and install all of the required packages:**
   
   _cd custom-webchat/ && npm i_

Now you are ready to start the default webchat and talk to the example bot:

- _npm run dev_

This starts a development server on your computer, which you can launch by opening the following address in your browser: [_http://localhost:8080_](http://localhost:8080/)

After clicking on the button on the right bottom corner of your screen, you should see the following. You can type in something like “hi” to test the bot:

**Error! Filename not specified.**

The webchat’s widget documentation gives a good overview on what CSS classes you can change: [https://github.com/Cognigy/WebchatWidget/tree/master/src/webchat-ui](https://github.com/Cognigy/WebchatWidget/tree/master/src/webchat-ui)

For this tutorial, use the example provided at the bottom of the documentation, which looks similar to this:

<style>
    [data-cognigy-webchat-root].webchat-root {}  
    [data-cognigy-webchat-root] [data-cognigy webchat].webchat {
        animation: grow 0.5s;
        border-radius: 80px;
    }

@keyframes grow {
        0% {
            height:5.8px;
        }
        100% {
            height:580px;
        }
    }
</style>

Once you create a style tag and insert the example code in it and reload the page, you should see the result shown at the beginning of this blog post. If you still need anything else feel free to contact us.

Take a look at our tutorial, how to customize a Cognigy Webchat.

Tutorial - Customize your Cognigy Webchat - YouTube  
[Tutorial - Customize your Cognigy Webchat](https://www.youtube.com/watch?v=VA6FbcfU3PU)