> For the complete documentation index, see [llms.txt](https://help.inteliwise.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inteliwise.com/chatbot/how-to-set-up-your-chatbot/step-3-look-and-feel.md).

# STEP 3: Look & Feel

1. **General settings** - just add the name of your Project here. Below you can see the place, where the "Bot name" will be displayed, you can also enter the name of your company here:

![](/files/L4SL6WEzFPujsqKyHUGY)

<mark style="color:orange;">**Remember:**</mark> always save your changes by clicking <mark style="color:green;">**SAVE**</mark> at the top of the screen! You will be able to view your changes immediately in the view on the right.

**2.** **Look** - this is where you set the color of the widget, the display location or add your logo.

![](/files/3JTVAVtVCsOC7o02688b)

<mark style="color:orange;">**Remember:**</mark> always save your changes by clicking <mark style="color:green;">**SAVE**</mark> at the top of the screen! You will be able to view your changes immediately in the view on the right.

**3. Get code** - once you've gone through the most important settings, it’s time to add the Widget to        your website. We've made it easy for you. The only thing you need is to paste the embed code  according to the instructions below. That's it!

![](/files/3XqD2Llnuj6MqFDVMbAN)

<mark style="color:orange;">**Remember:**</mark> always save your changes by clicking <mark style="color:green;">**SAVE**</mark> at the top of the screen! You will be able to view your changes immediately in the view on the right.

<mark style="color:yellow;">**TIP**</mark> Send this instruction to your web specialist,  if you haven’t  worked with the HTML yet.

After refreshing the page (sometimes it is also necessary to clear the cache) the Lead-o-Mat widget will appear immediately according to your settings. From now on, your customers will have their own assistant!

**4. CSS settings** - if you need more style settings you can use the editor. We have listed the most important variables so that you can adjust your widget even more precisely.

![](/files/00Zi4xKjfkCYBcIandJs)

<mark style="color:orange;">**Remember:**</mark> always save your changes by clicking <mark style="color:green;">**SAVE**</mark> at the top of the screen! You will be able to view your changes immediately in the view on the right.

**5.** **Labels** - here you will find the button settings that we use in the widget

![](/files/Ho9fUnsReFmB01sVVNzu)

<mark style="color:orange;">**Remember:**</mark> always save your changes by clicking <mark style="color:green;">**SAVE**</mark> at the top of the screen! You will be able to view your changes immediately in the view on the right.

**6. Advanced** - here you can delete your project. Remember that a deleted project cannot be recovered. Be careful and think through your decision.

![](/files/SmE2fdIeE4WDtBIqJWJT)

**Examples of user interface / widgets:**

In the user interface, a text input field enables asking manual questions, presents a list of most popular questions and also related topics. It handles misspellings and grammar errors as well. If it is unable to answer the question it provides a “don’t know” message and gives one the ability to rephrase your question or connect to the Live Chat operator for further assistance.

| ![](/files/k3pxHweL0hIWwG5eceFn) | ![](/files/RpVKLjep2jcrFzExoCsl) |
| -------------------------------- | -------------------------------- |
| ![](/files/jeW6xAbQqwjzw1QSD45c) | ![](/files/3Lyr9PTczsmPmrApRIp8) |
