Webchat widget actions

AGENTS.md

@@ -12,3 +12,8 @@
 - **Category Index Pages**: You MUST manually define a `slug` in `_category_.json` for all subdirectories.
   - Pattern: `/wordpress-hosting/category/{dirname}` (e.g., `/wordpress-hosting/category/overview`).
   - This ensures a consistent URL structure for category landing pages.
+
+## YAML Frontmatter
+- **Keywords and Tags**: When adding `keywords` or `tags` in YAML frontmatter, they MUST be arrays, not strings.
+  - ✅ Correct: `keywords: ["keyword1", "keyword2"]` or `tags: ["tag1", "tag2"]`
+  - ❌ Incorrect: `keywords: "keyword1, keyword2"` or `tags: "tag1, tag2"`

docusaurus/docs/business-app/conversations/conversations-ai-web-chat-overview.md

@@ -128,9 +128,79 @@ You can tailor the web chat widget to align with your branding and operational n
 - **Welcome Greeting**: Set a header message to invite engagement.
 - **Initial AI Message**: Configure a custom greeting that appears shortly after the chat is opened.
 - **Phone Configuration**: Define how received calls and SMS messages should be handled.
+- **Widget Actions**: Create direct links that automatically open the chat widget with predefined messages—perfect for email campaigns, landing pages, and support pages.
 
 Access these settings via Administration > Conversations Settings > Configure Web Chat`.
 
+## Widget Actions
+
+Widget actions allow you to create direct links that automatically open the web chat widget with predefined messages. This feature is perfect for email campaigns, landing pages, support pages, or any scenario where you want to direct visitors to start a chat with a specific message.
+
+:::note
+The web chat widget must be installed on the page for these actions to work.
+:::
+
+### Action Types
+
+There are two types of widget actions you can configure:
+
+- **Prefill message**: Opens the widget and pre-fills the message field with your predefined text. The visitor must click send to actually send the message. Use this when you want to give visitors control over when to send the message.
+- **Send message**: Opens the widget and automatically sends the predefined message without requiring any user interaction. Use this for immediate engagement and when you want the message sent automatically.
+
+### Implementation Methods
+
+You can trigger widget actions using two methods:
+
+**Anchor link listener**:
+- Best for: Direct links, email campaigns, navigation from external sources
+- Uses URL hash format that the widget automatically detects
+- Format: `#webchat-send-message?webchat-widgetId={widget-id}` or `#webchat-prefill-message?webchat-widgetId={widget-id}`
+- The widget detects the hash when the page loads or when the hash changes
+- Example: `https://yourwebsite.com#webchat-send-message?webchat-widgetId=fedf2e7a-30fb-11f0-941a-ea112a20`
+
+**JavaScript API**:
+- Best for: Custom integrations, dynamic content, programmatic triggering
+- Allows you to trigger actions programmatically from your own JavaScript code
+- Useful when you need to trigger actions based on user interactions or dynamic conditions
+
+### Configuration Steps
+
+![Widget Actions configuration interface](./img/widget-actions-configuration.png)
+
+1. Navigate to **Conversations Settings > Web Chat Configuration > Widget Actions**
+2. **Select an action**: Choose **Prefill message** or **Send message**
+3. **Select an implementation method**: Choose **Anchor link listener** or **JavaScript API**
+4. **Enter a message** (optional): Type the message that will be used when the action is triggered. If left empty, the action will open the Web Chat only.
+5. **Copy the generated code**: Use the provided code as an anchor link or redirect target
+
+The generated code will look like: `#webchat-send-message?webchat-widgetId=fedf2e7a-30fb-11f0-941a-ea112a20`
+
+### Code Examples
+
+**Anchor Link Example** (Send message):
+```html
+<a href="#webchat-send-message?webchat-widgetId=fedf2e7a-30fb-11f0-941a-ea112a20">Chat with us about pricing</a>
+```
+
+**Anchor Link Example** (Prefill message):
+```html
+<a href="#webchat-prefill-message?webchat-widgetId=fedf2e7a-30fb-11f0-941a-ea112a20">Ask about our services</a>
+```
+
+**JavaScript API Example**:
+```javascript
+// Trigger send message action programmatically
+window.location.hash = '#webchat-send-message?webchat-widgetId=fedf2e7a-30fb-11f0-941a-ea112a20';
+```
+
+### Use Cases
+
+- **Email campaigns**: Include a "Chat with us" link that opens the widget with a message like "I'm interested in your services"
+- **Landing pages**: Add CTAs that open chat with context-specific messages
+- **Support pages**: Create links that open chat with pre-filled support questions
+- **Product pages**: Enable visitors to ask about specific products with pre-filled inquiries
+- **External navigation**: Link from external sites or apps directly to your chat with context
+
 ## FAQs About AI Web Chat in Conversations
 
 <details>
@@ -209,3 +279,45 @@ To hide the reCAPTCHA badge, go to your website CSS editor:
 
 - Save and preview your website.
 </details>
+
+<details>
+<summary><strong>How do I create a link that opens the web chat with a predefined message?</strong></summary>
+
+You can create widget action links that automatically open the chat widget with predefined messages:
+
+1. Navigate to **Conversations Settings > Web Chat Configuration > Widget Actions**
+2. Select an action type (**Prefill message** or **Send message**)
+3. Choose **Anchor link listener** as the implementation method
+4. Enter an optional message
+5. Copy the generated code (e.g., `#webchat-send-message?webchat-widgetId=...`)
+6. Use this code as an anchor link on your website, in emails, or as a redirect target
+
+The widget will automatically detect the hash and trigger the action when the page loads or when the hash changes.
+</details>
+
+<details>
+<summary><strong>What's the difference between prefill message and send message actions?</strong></summary>
+
+**Prefill message**: Opens the widget and pre-fills the message field with your predefined text. The visitor must click send to actually send the message. This gives visitors control over when to send the message and allows them to edit it if needed.
+
+**Send message**: Opens the widget and automatically sends the predefined message without requiring any user interaction. This is ideal for immediate engagement and when you want the message sent automatically.
+
+Choose **prefill message** when you want visitors to review or edit the message before sending. Choose **send message** when you want immediate, automatic engagement.
+</details>
+
+<details>
+<summary><strong>Can I trigger web chat actions programmatically with JavaScript?</strong></summary>
+
+Yes! You can use the **JavaScript API** implementation method to trigger widget actions programmatically:
+
+1. Navigate to **Conversations Settings > Web Chat Configuration > Widget Actions**
+2. Select **JavaScript API** as the implementation method
+3. Configure your action and copy the provided code
+4. Use JavaScript to trigger the action, for example:
+
+```javascript
+window.location.hash = '#webchat-send-message?webchat-widgetId=your-widget-id';
+```
+
+This is useful for custom integrations, dynamic content, or triggering actions based on user interactions or conditions.
+</details>

docusaurus/docs/business-app/conversations/index.mdx

@@ -131,6 +131,21 @@ For more details, see [AI Web Chat Overview](./conversations-ai-web-chat-overvie
 
 </details>
 
+<details>
+<summary>How do I create a link that opens the web chat with a predefined message?</summary>
+
+You can use Widget Actions to create direct links that automatically open the chat widget with predefined messages. This is perfect for email campaigns, landing pages, or support pages.
+
+1. Navigate to **Conversations Settings > Web Chat Configuration > Widget Actions**
+2. Select an action type (**Prefill message** or **Send message**)
+3. Choose **Anchor link listener** as the implementation method
+4. Enter an optional message
+5. Copy the generated code and use it as an anchor link on your website, in emails, or as a redirect target
+
+For detailed instructions and examples, see the [Widget Actions section](./conversations-ai-web-chat-overview.md#widget-actions) in the AI Web Chat Overview.
+
+</details>
+
 <details>
 <summary>How am I assigned a phone number?</summary>