> For the complete documentation index, see [llms.txt](https://documentation.owlbot.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.owlbot.ai/bot-customisation/chatbot-appearance-and-message.md).

# Chatbot Appearance and message

`https://www.owlbot.ai/api/bot/[id]/update/`

Where \[id] is the chatbot *uuid* of the chatbot you want to update.

in terms of design, there is a lot of parameters you can play with :&#x20;

### For Chatbot Window

| Property                    | Type   | Description |
| --------------------------- | ------ | ----------- |
| **bot\_primary\_color**     | string | Optional.   |
| **bot\_secondary\_color**   | string | Optional.   |
| **bot\_user\_icon**         | string | Optional.   |
| **bot\_assistant\_icon**    | string | Optional.   |
| **bot\_title**              | string | Optional.   |
| **welcome\_message**        | string | Optional.   |
| **bot\_input\_placeholder** | string | Optional.   |
| **bot\_footer\_text**       | string | Optional.   |

### For Chatbot Bubble

The chatbot bubble is the always visible bubble (often placed at the bottom left of the screen).

If your using it, it can be useful to customise it to match the colours and design of your site.

Here is the parameters you can play with :

| Property                                | Type   | Description |
| --------------------------------------- | ------ | ----------- |
| PLACEHOLDER\_IFRAME\_POSITION\_BOTTOM   | string | Optional.   |
| PLACEHOLDER\_IFRAME\_POSITION\_RIGHT    | string | Optional.   |
| PLACEHOLDER\_TOOLTIP\_WELCOMME\_MESSAGE | string | Optional.   |
| PLACEHOLDER\_TOOLTIP\_MAIN\_COLOR       | string | Optional.   |
| PLACEHOLDER\_TOOGLE\_BUTTON\_IMG\_OPEN  | string | Optional.   |
| PLACEHOLDER\_TOOGLE\_BUTTON\_IMG\_CLOSE | string | Optional.   |

## Some Example :

If you want to update the primary Color to Red Color. (`#FF0000`) and the bot Title to "test".

#### In Javascript / Fetch

dont forget to change \[id] by your chatbot `UUID`.

```javascript

let dataToUpdate = {
bot_primary_color : "#FF0000",
bot_title : "test"
}


fetch('https://www.owlbot.ai/api/bot/[id]/update/', {
  method: 'POST',
  headers: {
    'Authorization': 'abcdefghj',
  },
  body: JSON.stringify({
  dataToUpdate : dataToUpdate,
  botId : [id]
  })
}).then(res => res.json())
  .then(res => console.log(res));
```

## Response

response is a HTTP 200 with the newly updated chatbot property as JSON.&#x20;

<pre class="language-json"><code class="lang-json"> {
         "id":91,
         "created_at":"2023-06-28T07:01:58.308677+00:00",
         "bot_title":"test", <a data-footnote-ref href="#user-content-fn-1">&#x3C;== updated property</a>
         "bot_footer":"Powered by Owlbot",
         "bot_user_icon":"https://owlbot.ai/assets/chatbot/user.png",
         "bot_assistant_icon":"https://hrfaciqawmkslnzhtrpe.supabase.co/storage/v1/object/public/public/3c895cd5-1298-4f30-8417-044e2633293c/5ae2b602-bca9-4623-bf51-bf50b055a0c5.png",
         "bot_primary_color":"#FF0000",
         "uuid":[id],
         "owner":test user, 
         "visibility":1,
         "welcome_message":"Welcome Message",
         "bot_input_placeholder":"Type a message",
         "bot_footer_text":"Powered by Owlbot",
         "bot_secondary_color":"#6366F1",
         "PLACEHOLDER_IFRAME_POSITION_BOTTOM":"16px",
         "PLACEHOLDER_IFRAME_POSITION_RIGHT":"16px",
         "PLACEHOLDER_TOOLTIP_WELCOMME_MESSAGE":"Hello ! How can I help you ?",
         "PLACEHOLDER_TOOLTIP_MAIN_COLOR":"#8B5CF6",
         "PLACEHOLDER_TOOGLE_BUTTON_IMG_OPEN":"https://iframe.gptyourdata.ai/assets/logo-white.svg",
         "PLACEHOLDER_TOOGLE_BUTTON_IMG_CLOSE":"https://iframe.gptyourdata.ai/assets/x.svg",
         "js_script_name":null,
         "active":1,
         "word_count":2106,
         "messages_count":37,
         "bot_error_message":"Désolé, je ne comprends pas la question.",
         "doc_count":2,
         "link_count":0,
         "show_doc":0,
         "bot_agent_icon":"https://owlbot.ai/assets/chatbot/agent.png",
         "bot_agent_color":null,
         "secure":0,
         "is_working":0
      },
</code></pre>

[^1]:
