> ## Documentation Index > Fetch the complete documentation index at: https://docs.vozagent.ai/llms.txt > Use this file to discover all available pages before exploring further. # Installing and Customizing Your Widget > How to customize your widget's appearance and behavior, configure intake questions, and embed it on your website. Once you've created a widget key, you can customize everything about how it looks and behaves on your website. This article covers all four configuration tabs: Appearance, Greeting & Behavior, Intake Questions, and Tracking Code. *** ## Opening the Widget Detail View From the **Widgets** page, click on any assistant card that has a widget key. This opens the widget detail view, where all configuration happens. At the top, you'll see the widget name and the assistant it's connected to. The view is organized into four tabs: | Tab | What It Controls | | ----------------------- | ------------------------------------------------------------------- | | **Appearance** | Display name, accent color, and avatar | | **Greeting & Behavior** | Greeting message, primary goal, inbox mode, and appointment booking | | **Intake Questions** | Which information the assistant collects from visitors | | **Tracking Code** | The embed code snippet and installation instructions | *** ## Appearance Tab The Appearance tab lets you control how the widget looks to visitors. A live preview on the right side of the screen shows your changes in real time. ### Avatar Upload a custom image that appears in the widget header and next to assistant messages. Click the avatar circle to upload a photo. * Accepted formats: JPEG, PNG, WebP, GIF * Maximum file size: 5MB * Square images work best -- after uploading, a crop tool lets you adjust the framing * You can remove a custom avatar at any time to revert to the default bot icon ### Display Name The name shown in the widget header next to the avatar. If you leave this empty, it defaults to your assistant's name (e.g., "Sarah" or "HVAC Assistant"). ### Accent Color The theme color used for the widget header, send button, and message bubbles. You can pick a color from the color picker or enter a hex code directly (e.g., `#17A364`). This is a good place to match your brand colors so the widget feels like a natural part of your website. After making changes, click **Save Changes** to apply them. *** ## Greeting & Behavior Tab This tab controls how the assistant interacts with visitors when they open the widget. ### Greeting Message The first message visitors see when they open the chat. For example: * "Hi! How can I help you today?" * "Welcome to ABC Plumbing. Ask me about our services or book an appointment." * "Need a quote? I'm here to help. Just tell me what you're looking for." Leave this empty to use your assistant's default greeting. ### Primary Goal Choose what the assistant should focus on during conversations: | Goal | Description | | -------------------------------- | -------------------------------------------------------------------------------- | | **Lead Capture & Qualification** | The assistant prioritizes collecting contact information and qualifying the lead | | **Customer Support & FAQs** | The assistant focuses on answering questions and resolving issues | ### Inbox Mode This setting determines how conversations from this widget are categorized in your inbox: * **Front Desk (Lead Capture)** -- Conversations appear as new leads * **Support Desk (Customer Support)** -- Conversations appear as support requests ### Appointment Booking A toggle that enables or disables appointment scheduling through the widget. When turned on, the assistant can offer to book appointments during the conversation (requires a connected calendar integration). Click **Save Changes** after adjusting any settings. *** ## Intake Questions Tab Intake questions determine what information the assistant collects from visitors. This is especially useful for lead capture -- the assistant will naturally weave these questions into the conversation. ### Available Fields Select which fields the assistant should collect by checking the boxes: | Field | Description | | -------------------------- | -------------------------------- | | **Full Name** | The visitor's name | | **Phone Number** | A callback number | | **Email Address** | Contact email | | **Project / Service Type** | What service they need | | **Location** | City, ZIP code, or address | | **Budget Range** | Their expected budget | | **Timeline / Urgency** | How soon they need the work done | | **Property Type** | Residential, commercial, etc. | | **Additional Notes** | Open-ended notes or comments | By default, Name, Phone Number, Email Address, Project / Service Type, and Location are selected. ### Custom Question Below the standard fields, there's an optional custom question field where you can add a business-specific question. For example: * "What type of service are you interested in?" * "How did you hear about us?" * "Is this for a new construction or an existing property?" Click **Save Changes** to apply your selections. *** ## Tracking Code Tab This is where you get the embed code to install the widget on your website. ### The Embed Code The tracking code tab shows a snippet that looks like this: ```html theme={null} ``` Click the **Copy** button to copy the code to your clipboard. ### Where to Paste It Place the code snippet right before the closing `` tag on any page where you want the widget to appear. If you want it on every page, add it to your site's main template or layout file. ### Platform-Specific Instructions If you need help installing the code on a specific platform, use the **"Select website type"** dropdown to choose your platform. Instructions are available for: * HTML / Static Site * WordPress * Shopify * Wix * Squarespace * Webflow * Next.js / React * Blogger * Ghost * Framer Selecting a platform will show a link to the relevant installation guide. ### Email the Code to Your Developer If someone else manages your website, you can send them the embed code directly. Enter their email address in the field at the bottom of the Tracking Code tab and click **Send**. They'll receive an email with the code snippet and basic installation instructions. ### Widget Key and Mode Reference At the bottom of this tab, you'll see your full widget key and the current mode (Chat Only, Voice Only, or Chat & Voice) for reference. *** ## Deleting a Widget If you need to remove a widget, click the trash icon in the top-right corner of the widget detail view. A confirmation dialog will ask you to confirm the deletion. **Important:** Deleting a widget key immediately stops the embed code from working. Any page still using that code will no longer show the widget. Make sure to remove the embed code from your website after deleting the key. *** ## Tips for Getting the Most from Your Widget * **Match your brand** -- Use your company's accent color and upload your logo as the avatar for a professional, on-brand experience. * **Write a specific greeting** -- A greeting like "Welcome to ABC Plumbing! Need a quote or want to book a service call?" performs better than a generic "How can I help?" * **Start with essential intake fields** -- Collecting name, phone, and project type is usually enough. Too many required fields can discourage visitors from completing the conversation. * **Add knowledge base content** -- The more your assistant knows about your business, the better it can answer visitor questions. See [Knowledge Base Overview](/help/knowledge-base/knowledge-base-overview) for details. * **Test it yourself** -- After installing, open your website in a private browser window and try chatting with the widget to make sure everything works as expected. *** ## Related Articles * [Widgets Overview](/help/widgets/widgets-overview) * [Creating a Widget](/help/widgets/creating-a-widget) * [Knowledge Base Overview](/help/knowledge-base/knowledge-base-overview) * [Editing Your Assistant](/help/assistants/editing-your-assistant)