Worknet offers five types of applications, all built on the same platform but designed to provide distinct user experiences:
- Salesforce Embedded Experience
- Zendesk Embedded Experience
- Slack Embedded Experience
- Widget – Embeddable in virtually any web application
- API – Enables custom customer-specific UI integrations
This article focuses on embedding the Widget into a web application.
To get started, navigate to the Apps section to view the full list of available applications.
Click on the three dots to test the widget
The test page is divided into three sections:
- Configuration: Located on the left side.
- Widget Preview: Displayed on the right side.
- Code Snippets: Use the tab to access the code snippets for embedding in the web application.
1. Configuration
This screen allows you to configure the appearance and behavior of your chat widget for seamless integration into your website or application. Here's a breakdown of each section:
1. Widget Key
- Description: The unique identifier for your widget. Use this key to integrate the widget into your website or application.
- Usage: Copy this key and add it to your codebase where the widget needs to be embedded.
2. Appearance
Customize the visual and functional aspects of your chat widget:
- Primary Color: Select the main color for your widget. This typically affects the button and header areas.
- Secondary Color: Choose a complementary color for secondary elements, like the widget background.
- Type:
- Popup: Displays the chat as a pop-up window.
- Drawer: Opens the chat as a sliding drawer.
- Position:
- Left: Aligns the widget on the left side of the screen.
- Right: Aligns the widget on the right side of the screen.
- Header Text: Customize the title displayed at the top of the widget. Example: "Smart Assistance."
- Width: Set the width of the chat widget (e.g., 600px).
- Z-index: Specify the widget's stacking order to control its layering on your page (e.g., 1000).
3. Button
Control the appearance and behavior of the widget's trigger button:
- Text: Add a label for the button (optional).
- Icon: Select an icon to display on the button (e.g., Chat).
- Invert Button Color: Toggle to invert the button's colors for better contrast.
- Hidden Button: Enable this option if you want to make the button invisible and trigger the chat using custom logic.
- Add Custom Trigger Sample: Check this box to access a code sample for custom button triggers.
4. Custom Context
- Description: Add specific context information to be sent with the widget. This can include user or session details in JSON format.
- Example:
{ "user_id": "12345", "language": "en" }
5. Collaboration/History
- Grouping ID: Enter a unique ID to group chat sessions or share histories across users for better collaboration.
6. OIDC Invoke
- External Login: Click this button to configure authentication using OpenID Connect (OIDC). This allows secure user identification within the widget.
By configuring these settings, you can seamlessly customize the chat widget to match your brand's design and functionality requirements, ensuring a cohesive and user-friendly experience.
2. Widget preview
You can preview and test all the changes made in the configuration section. Please note that configuration data is not saved between sessions and will revert to the default settings.
Clicking the widget icon will open it. If the widget is set as "auth required," a login screen will appear; otherwise, you will be taken directly to the chat experience.
3. Code snippets
Similar to the widget preview, the code will dynamically update to reflect any changes made in the configuration section. Be sure to add the provided JavaScript lines to the HTML body.
Comments
0 comments
Please sign in to leave a comment.