The Widget Installation page is where you connect SupportWire to your actual website or application. This section allows you to customize the look and feel of the chat interface and provides the specific code snippets needed to bring your AI assistant to life for your customers.
To begin the installation process:
Click the Settings (gear icon) in the bottom-left corner.
Under the Channels section in the sidebar, select Widget Installation.
1. Choosing Your Installation Method
Depending on how your site is built, you can choose between two primary methods:
Code Snippet: A standard JavaScript block that you can paste into the
<head>or<body>of any HTML-based website.React: A dedicated component approach for modern web applications. If you select this tab, the code will format specifically for your React environment.
2. Customizing the Appearance
Before you copy the code, use the Configuration section to ensure the widget matches your site’s design:
Theme: Choose between Light or Dark mode. Select the theme that offers the best contrast against your website's background.
Trigger Position: Decide where the chat bubble should appear on the screen. Options include:
Bottom Right (Standard)
Bottom Left
Top Right
Top Left
Widget Type: Choose how the chat interface expands when clicked:
Popup: A small, floating window.
Drawer: A side panel that slides out from the edge of the screen.
Center Modal: A focused window that appears in the middle of the screen (ideal for high-engagement support).
3. Implementing the Code
Once you have finalized your configuration, the Installation Code block will automatically update with your chosen settings (such as theme: "light" and triggerPosition: "bottom-right").
How to install:
Click the Copy icon in the top-right corner of the code block.
For standard sites: Paste the snippet directly into your website's code.
For React apps: Follow the implementation pattern shown in the React tab to import and initialize the widget component.
Use Cases for Custom Configuration
Avoiding UI Clutter: If you have a "Back to Top" button in the bottom-right corner, use the Trigger Position setting to move the widget to the Bottom Left to prevent overlapping.
Branded Experience: Use the Dark theme if your website features a modern, dark aesthetic, ensuring the assistant feels like a native part of your UI.
High-Impact Support: Use the Center Modal widget type on specific troubleshooting or contact pages where you want the user's full attention on the support conversation.
Need more help?
Reach out to our support at [email protected] or submit a request on our support board! 😃
Was this helpful?
Comments
You must be logged in to comment in this article.
Login to comment