# Humley Conversation Widget Installation Guide
The following document provides information surrounding the installation of the Humley Conversation widget on your website.
With the head of your HTML page add the following:
`<script src="https://channels.humley.com/widget/humley-chat.js"></script>`
Before the closing body tag add the following:
`<humley-chat-widget project="5FA9E590-92FF-4628-BCE7-2F87357909EA" username="{Username}" password="{Password}"></humley-chat-widget>
To get your projectId, please select your desired project within Humley Studio, visit the channels page and select Humley Widget. Within the second step your project Id can be seen within the URL.
Next, replace the username and password with your username and password which can also be found within the widget page.
After your closing body tag add the following:
```
<script>
var customizationProperties = {
"errorText": "Sorry, there has been an issue. Please try again.",
"placeholder": "How can I help?",
"widgetColour": "#1890FF",
"widgetIconColour": "#ffffff",
"backgroundColour": "#fff",
"chatLoadingColour": "#1890FF",
"loadingColour": "#1890FF",
"botBackgroundColour": "#eee",
"botTextColour": "#000",
"userBackgroundColour": "#1890FF",
"userTextColour": "#FFF",
"buttonTextColour": "#000",
"feedbackYesText": "Yes",
"feedbackNoText": "No",
"inputBackgroundColour": "#eee",
"inputTextColour": "#000",
"sendButtonColour": "#1890FF",
"sendButtonDisabledColour": "#e2e2e2"
};
widget = document.querySelector('humley-chat-widget');
widget.widgetcustomization = customizationProperties;
</script>
```
The following provides an example of how the document should be structured:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<script src="https://channels.humley.com/widget/humley-chat.js"></script>
</head>
<body>
...
<humley-chat-widget project="{projectGuid}" username="{Username}" password="{Password}"></humley-chat-widget>
</body>
<script>
var customizationProperties = {
"errorText": "Sorry, there has been an issue. Please try again.",
...
};
var widget = document.querySelector('humley-chat-widget');
widget.widgetcustomization = customizationProperties;
</script>
</html>
```
The conversational assistant has the following configuration options available:
|Configuration Option | Description | Type | Example
|--|--|--|--|
| position | The position that the chat widget is position on the web page. This can be provided as "bottom-left" or "bottom-right" | String | "bottom-right"
| fontSize | The font size of the assistant | String | "14px"
| widgetColour | The background colour of the launcher shown to launch the assistant. | String | "#1890FF"
| widgetIconColour | The background colour of the launcher shown to launch the assistant. | String | "#EEEEEE"
| widgetBorderStyles |The border style of the launcher shown to launch the assistant.| String | "none"
| widgetBorderRadius | The border radius colour of the launcher shown to launch the assistant. | String | "100%"
| backgroundColour | The background colour of the main chat area of the assistant | String | "#EEEEEE"
| closeChatIconUrl | The image that should be displayed on the conversational assistant launcher. This should be provided at a ratio of at least 100px x 100px | String | "#EEEEEE"
| botBackgroundColour | The background colour of the chat bubble that contains the responses given by the assistant. | String | "#EEEEEE"
| botTextColour | The text colour colour of the chat bubble that contains the responses given by the assistant. | String | "#1890FF"
| botBorderStyle | The border style of the chat bubble that contains the responses given by the assistant. | String | "1px solid #FFF"
| botBorderRadius | The border radius of the chat bubble that contains the responses given by the assistant. | String | "5px"
| userBackgroundColour | The background colour of the chat bubble that contains the responses enter by the user of the assistant. | String | "#EEEEEE"
| userTextColour | The text colour colour of the chat bubble that contains the responses enter by the user of the assistant. | String | "#000000"
| userBorderStyle | The border style of the chat bubble that contains the responses enter by the user of the assistant. | String | "1px solid #EEEEEE"
| userBorderRadius | The border radius of the chat bubble that contains the responses enter by the user of the assistant. | String | "5px"
| buttonBackgroundColour | The background colour of the buttons provided underneath the assistant chat bubble responses. | String | "#1890FF"
| buttonTextColour | The background colour of the buttons provided underneath the assistant chat bubble responses. | String | "#FFFFFF"
| buttonBorderStyle | The border style of the buttons provided underneath the assistant chat bubble responses. | String | "1px solid #EEEEEE"
| buttonBorderRadius | The border radius of the buttons provided underneath the assistant chat bubble responses. | String | "5px"
| feedbackYesText | The text shown for a user to indicate that a user would like to provide positive feedback | String | "Yes"
| feedbackNoText | The text shown for a user to indicate that a user would like to provide negative feedback | String | "No"
| inputBackgroundColour | The background colour of the input field a user can enter their query. | String | "#FFFFFF"
| inputTextColour | The background colour of the input field a user can enter their query. | String | "#000000"
| inputBorderStyle | The border style of the input field a user can enter their query. | String | "1px solid #EEEEEE"
| inputBorderRadius | The border radius of the input field a user can enter their query. | String | "5px"
| sendButtonColour | The colour of the send button that becomes enabled when a user enters a query to the assistant within the input field. | String | "#1890FF"
| sendButtonDisabledColour | The colour of the the send button when it's disabled prior to a user enter a query into the assistant. | String | #e2e2e2"
| chatLoadingColour | The colour of the loading indicator shown when the assistant response is loading. | String | "#1890FF"
| loadingColour | The colour of the loading indicator when the chat window initial launches.| String | "#1890FF"
| errorText | In the event an error occurs via the assistant that cannot be catered to via the API, this text will be delivered to the user in response to their query. | String | "Sorry there has been an error, please try again later."
| placeholder | The placeholder text shown within the chat footer prior to a user entering their query. | String | "How can I help today?"
Sign in with Wallet
Connect another wallet