Custom Widget Integration

Overview

The Widget Customization console allows teams to adjust the visual and behavioral configurations of client-facing chat widgets. Workspace changes render in real-time on an interactive preview viewport, ensuring visual synchronization prior to production deployment.

Visual Configuration Breakdown

1. Appearance Controls

• Pick a Style: Modifies baseline interface mode parameters between Dark (system default) and Light variants.
• Logo Mapping: An active toggle component that initializes text inputs to accept custom CDN brand asset paths under the Logo url key parameter.
• Theme Color Engine: Defines primary action branding accents. Default colors include Green, Blue, Purple, Orange, Red, and an adaptive Rainbow spectrum selection.
• Advanced Color Overrides: Toggling the advanced settings parameters allows you to specify hex color codes for specific interface elements:
  • Background: Core body wrapper canvas color values.
  • Customer Bubble & Text: Fill color and typographic contrast elements for client message components.
  • Agent Bubble & Text: Design assets matching handling agent response typography containers.
  • Tooltip: Auxiliary text help alert accent colors.
  • Captions: Minor timestamp and secondary data color labels.

2. Typography & Text Headers

• Header Configurations: Controls text inputs mapped to multi-lingual properties for widget header titles (e.g., Welcome to Ark) and primary greeting definitions (e.g., We’re here to help. Ask anything). Includes localization triggers labeled Add new language + alongside trash icons to prune redundant language schemas.
• Header Structural Patterns: Applies background geometric abstractions onto widget head blocks, including Dots, Waves, or Lines.

3. Automated Forms & Routing Handlers

• Greeting Messaging Matrix: Maps specific greeting values to clear language code targets, providing extensibility through explicit Add new message commands.
• Pre-Chat Capture Forms: A boolean toggle component that enables or disables mandatory collection forms prior to granting conversation entry.
• Offline Routing Parameters: An operational toggle that enables automated offline messages when incoming client requests arrive outside active operational timelines.

4. Layout Layout & Accessibility Variables

• Widget Alignment Position: Defines edge alignment mapping parameters, allowing the widget to anchor to either the Right or Left lower view quadrants.
• Dimensional Bounds: Adjusts total structural workspace properties bounding height and width parameters.
• Font Sizing Weights: Sets standard pixel scaling factors across typo systems within the client widget window.

Real-Time Preview Simulation

The right side of the canvas features an active interactive mockup device that simulates the end-user widget view. Operators can verify component rendering under multiple interface status configurations using a dedicated viewport selection dropdown:

• Get started: Standard entry view.
• Home: Base communication selection view.
• Pre chat: Validation form display mode.
• Offline: Fallback missing status configuration display.
• Online: Operational connectivity overview layout.

Embedding the Client Script

Moving to the Integration panel reveals your organization's unique global deployment script.

1. Select the Copy the code control element located in the upper right.
2. Paste the snippet wrapper markup directly above the closing </body> element inside your target client application source code.

Once the script executes within your client application, an interactive chat bubble triggers in the designated lower screen quadrant. Clicking this bubble reveals a multi-option interface header containing four primary navigation actions:

• Live Chat: Connects users to open conversation streams, routing them directly to a creation flow if no active threads exist.
• FAQs Dropdown: Displays a searchable index with language selection drop-downs (English or Arabic) and paginated navigators.
• History: Lists past conversational histories, active agent identifiers, resolution states, and sub-ratings metrics.
• Booking: Opens an inline interactive scheduler calendar module. This interface displays organizational assets, session duration selections (e.g., 15 / 30 Minutes), and automated Google Meet calendar parameters to organize video consultation sessions.