> ## Documentation Index > Fetch the complete documentation index at: https://docs.crescendo.ai/llms.txt > Use this file to discover all available pages before exploring further. # Enable AI Assistant on your Website > Step-by-step instructions how to embed and configure the Crescendo.ai AI Assistant on a Website To enable Crescendo.ai AI Assistant on your WebSite, we provide Bot Widget that can be quickly added to your site. You can use simple embed code to enable Bot. You can also customize appearance of the bot widget, by passing parameters and configuring CSS variables. > **Note:** Place this embed code at the **end of the `` tag**.\ > This ensures the DOM is fully loaded before the script runs, prevents "reference before definition" errors. ## Bot Widget embed code Here is an example embed code you would need to add to your website to enable Bot: ```html theme={null}

``` ## Bot Widget parameters You can pass the following parameters to Bot Widget: | Name | Description | | --------------------- | --------------------------------------------------------------------------------------------------- | | name | Bot Name. Will be shown in Bot Header. | | url | Bot Service URL. | | org-id | Your Org ID. | | bot-id | ID of your bot. | | logo-svg | Your Logo icon (svg) | | logo-url | Your Logo URL. Use either `logo-svg`, or `logo-url`. | | popup-logo-svg | The Logo used for the widget popup (do not use with popup-logo-url) | | popup-logo-url | The Logo used for the widget popup (do not use with popup-logo-svg) | | bot-icon-svg | Icon to use for messages from Bot | | user-icon-svg | Icon to use for messages from User | | system-icon-svg | Icon to use for system messages | | always-open | Keep bot UI always open | | prefilled-form-fields | Prefilled form field values. Serialized JSON. See [Pre-filled Form Values](#pre-filled-form-values) | | suppress-startup-form | Suppresses the startup data collection form. Shown later on handoff if required. Default: `false`. | Here is an example how to customize logo: ```html theme={null}

``` Here is an example of how to customize the popup logo: ```html theme={null} ``` ## Customizing appearance You can use CSS variables to customize appearance of certain elements of the Bot Widget. Here is the list of supported CSS variables: | Name | Description | | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --enegelai-bot-max-height | Max height Bot widget can take, i.e. 100vh - full height | | --enegelai-bot-height-top-margin | Margin from the top of the screen (i.e. 200px) - regular screen size | | --enegelai-bot-height-top-margin-sm | Margin from the top of the screen (i.e. 100px) - small screen size - for mobile | | --enegelai-bot-header-color | Header color | | --enegelai-bot-header-background | Header background color | | --enegelai-bot-message-bot-color | Bot message color | | --enegelai-bot-message-bot-background | Bot message background color | | --enegelai-bot-message-user-color | User message color | | --enegelai-bot-message-user-background | User message background color | | --enegelai-bot-message-system-color | System message color | | --enegelai-bot-message-system-background | System message background color | | --enegelai-bot-popup-color | Engage popup message text color | | --enegelai-bot-popup-background | Engage popup message background color | | --enegelai-bot-popup-logo-color | Logo color on Engage popup message | | --enegelai-bot-popup-close-color | Close button color on Engage popup message | | --enegelai-bot-anchor-popup-position | Position of popup message relative to anchor button (top,top-start,top-end,bottom,bottom-start,bottom-end,right,right-start,right-end,left,left-start,left-end) | | --enegelai-bot-user-message-avatar-position | User message avatar position (right,left) | | --enegelai-bot-form-submit-color | Submit button color for the data entry form (e.g. `rgb(250, 0, 0)` or `#FA0000`) | Here is an example how to use CSS variables: ```html theme={null}

``` ## Pre-filled Form Fields Values Bot may show a form to collect data from the user. For example, to collect contact information, such as name, email and phone number. At the same time, these values may already be known in the web application, for example, in case when user is already authenticated. It would be redundant to ask user to enter this data again in the bot. For such situations, Bot provides possibility to specify pre-filled values for the form fields. You may do so by passing values in a Bot attribute `prefilled-form-fields` or by calling method `setPrefilledFormFields` :::info When pre-filled form field values are provided, Bot will still show the form, initially filled with these values. This allows user to double-check that the information is correct, and make any adjustments if necessary before submitting the form.\ ::: Pre-filled form fields should be an object, where keys are form field names, and values are form field values. For example: ```javascript theme={null} const prefilledFields = { name:'John Smith', email:'john.smith@gmail.com', phone:'1-415-1112233' } ``` ### Set pre-filled form fields via attribute value Set value of the Bot widget attribute `prefilled-form-fields` to JSON representation of the object with form fields: ```html theme={null} ``` :::info The value of the attribute must be properly formatted JSON. ::: ### Set pre-filled form fields using method call You may need to make an API call to your backend to get the data for pre-filled form fields. For these cases, use method `setPrefilledFormFields` to set the data when it becomes available. ```html theme={null} ``` ### Full example Here is a full example setting pre-filled form fields using data from URL query string ```html theme={null} ``` ## Anchor button ### Position Anchor button You may position Bot Widget Anchor button anywhere on the screen, using css.\ For example: ```css theme={null} enegelai-bot::part(anchor){ position: fixed; right: 25px; top: 25px; } ``` If you change default position of the anchor button, you may also need to adjust position of the popup message relative to the anchor button. For this, set appropriate value for `--enegelai-bot-anchor-popup-position` CSS variable. ### Hide Anchor button Sometimes you may need to hide anchor button, for example when Bot Widget should always stay open. It's possible to do by adding this to style: ```css theme={null} enegelai-bot::part(anchor) { display: none; } ``` ## Bot Widget Javascript API You can call Bot Widget methods from your Javascript code to control Bot Widget programmatically. ### `setOpen` Allows you to open or close the Bot Widget programmatically. #### Parameters * `state` (boolean): Pass `true` to open the Bot Widget, or `false` to close it. #### Example ```javascript theme={null} function onBotOpen() { const chatBot = document.querySelector('enegelai-bot'); if (chatBot) { chatBot.setOpen(true); } } ``` ### `getOpen` Returns current Bot Widget open state. Returns `true` if Bot Widget is open, and `false` if it is closed. #### Example ```javascript theme={null} function onBotOpen() { const chatBot = document.querySelector('enegelai-bot'); if (chatBot) { const openState = chatBot.getOpen(); } } ``` ### `toggleOpen` Toggles Bot Widget open state. Opens it if it closed, closes it if it is open. #### Example ```javascript theme={null} function onBotOpen() { const chatBot = document.querySelector('enegelai-bot'); if (chatBot) { chatBot.toggleOpen(); } } ``` ### `setPrefilledFormFields` Allows you to pre-fill form fields values programmatically, for example, when they are known in advance, or retrieved from your backend. #### Parameters * `data` (object): Object with form field names as keys, and form field values as values. #### Example ```javascript theme={null} window.addEventListener('load', () => { const chatBot = document.querySelector('enegelai-bot'); if (chatBot) { chatBot.setPrefilledFormFields({ name: 'John Smith', email: 'john.smith@gmail.com', phone: '1-415-1112233' }); } }); ``` ### `clearConversation` Clears current Bot conversation and starts new one. #### Example ```javascript theme={null} function onClearConversation() { const chatBot = document.querySelector('enegelai-bot'); if(chatBot) { chatBot.clearConversation(); } } ``` ### `setInputValue` Allows you to set the value of the input field in the Bot Widget. You can use this method to set suggested message in the bot input field, for example, based on how user navigates on your website. #### Parameters * `value` (string): Text to set as value of input field. Pass empty string as value to clear the input field. #### Example ```javascript theme={null} function onSetInputValue() { const chatBot = document.querySelector('enegelai-bot'); if(chatBot) { chatBot.setInputValue('Suggested Message Text'); } } ``` ### `setContext` Allows you to pass information about user to the Bot, so Bot can use this information in answers. You can use this method to pass information like user name, what is user currently looking at one the website (e.g., current product page), or any other information that may be useful for the Bot to provide better answers. #### Parameters * `data` (object): Javascript object with data. Give keys self-explanatory names, so the Bot can understand better what information this is and how it can be used. #### Example ```javascript theme={null} window.addEventListener('load', () => { chatBot = document.querySelector('enegelai-bot'); // Set context chatBot.setContext({ UserName: 'John Smith', UserSubscriptionLevel: 'Premium', CurrentProduct: { name: '', description: '', } }); }); ``` ### `sendMessage` Allows you to send message in the bot conversation. You can use this method to send some predefined messages when user clicks some button on the page, for example. #### Parameters * `text` (string): Message to send. #### Example ```javascript theme={null} chatBot = document.querySelector('enegelai-bot'); chatBot.sendMessage('Hello!'); ``` ## Bot Widget Events You can subscribe to the events Bot Widget emits during chat processing. This can be useful to track bot conversation state and user activities in the bot widget. You can also use information from the Bot Widget events to send data to your backend for further processing. ### `c7o:bot:conversationStart` Event "c7o:bot:conversationStart" is emitted when user starts conversation with the bot by sending the first message. Expect object with the following information in the event.detail: ```json theme={null} { "conversationId": "66kheifsn0", "timestamp": 1750411316902, "author": "user", "type": "text", "data": { "text": "hello" }, "id": "r80ftm4p4i" } ``` ### `c7o:bot:open` Event "c7o:bot:open" is emitted when user opens the bot widget. ### `c7o:bot:close` Event "c7o:bot:close" is emitted when user closes the bot widget. ### `c7o:bot:formSubmit` Event "c7o:bot:formSubmit" is emitted when user submits the form with contact information before being connected to the agent. Expect object with form data in the event.detail: ```json theme={null} { "conversationId": "66kheifsn0", "formData": { "name": "John Smith", "email": "john.smith@gmail.com" } } ``` ### Example ```html theme={null} ```