Overview #

The Chat Node allows you to embed an AI-powered chatbot anywhere on your WordPress site. The chatbot can be used as a standalone feature or as part of a larger workflow, with access to data from other nodes to enhance its knowledge base. You can fully customize its appearance, behavior, and AI model settings. You can also feed it your own data so it only uses your data to answer messages.

Features #

Basic Configuration #

• Node Name: Identify your chat node within the workflow
• System Prompt: Define the chatbot’s personality, knowledge, and response style
• AI Model Selection: Choose from various AI models including:
  • Claude Models
  • OpenAI models
  • Gemini models
  • Llama models
  • Mistral models

Knowledge Customization #

System Prompt: Define the chatbot’s personality, knowledge, and response style.
In this prompt you can include output or context from other nodes as knowledge for the chatbot. This can be information that the user inserts in a form, or a static piece of content, or even an API call to another service.

Design Customization #

You can fully customize the appearance of your chat widget on the front end in this section.

• Theme Options:
  • Light theme
  • Dark theme
  • Custom theme with color picker
• Position:
  • Bottom right (default floating widget)
  • Bottom left
  • Top right
  • Top left
  • Inline (embedded in content)
• Bot Identity:
  • Custom bot name
  • Icon selection (Robot, Assistant, Brain, Chat)
• Typography:
  • Font family selection
  • Chat text size
  • Header text size
• Dimensions:
  • Custom width
  • Custom height
  • Border radius

After customization, you can preview how your chatbot would look like by clicking on the Preview button at the top of the node.

Behavior Settings #

• Initial Message: Welcome message shown when chat starts
• Input Placeholder: Custom placeholder text for the message input
• History Management:
  • Configurable message history length
  • Option to persist chat history across sessions
• Rate Limiting:
  • Enable/disable rate limiting
  • Configure maximum messages per time window
  • Set time window duration
• Advanced Features:
  • Typing indicators
  • Sound effects
  • Auto-open delay
  • Chat history persistence

Embedding #

After setting up your chatbot, you can save your workflow. When you do that you will receive a shortcode with the following format:

You can embed this shortcode on any or all pages of your website. The chatbot will show up how you have designed it, either as a floating widget, or inline.
When you make changes to the node, and you save the workflow, the changes will immediately reflect on the chatbot, so you don’t need to update your shortcode.

Using the Chat Node #

System Prompt Best Practices #

1. Define Role and Personality:

You are a customer service representative for [company name]. Your name is [bot name].
Your communication style is friendly and professional. Always maintain a helpful attitude
while staying within your knowledge boundaries.

2. Set Knowledge Boundaries:

CopyYou have access to information about our products and services. If asked about
something outside this scope, politely explain what you can and cannot help with.

3. Include Response Guidelines:

Keep your responses concise and focused. If you need clarification, ask specific
questions. Format complex information using bullet points or numbered lists for clarity.

4. Using Workflow Data:

When connected to other nodes, you can reference their data using input tags:
"Use this product information to answer questions: [[node-id]]"

Best Practices #

1. Response Quality:

• Provide clear, specific system prompts
• Include relevant knowledge context from other nodes
• Set appropriate context boundaries
• Test responses with various user inputs

2. User Experience:

• Choose appropriate positioning for your site layout
• Set rate limits to prevent abuse
• Configure appropriate chat history length
• Use typing indicators for natural feel

3. Performance:

• Monitor and adjust message history settings
• Set appropriate timeout values
• Consider rate limiting for high-traffic sites

4. Design Integration:

• Match your website’s color scheme
• Use consistent typography
• Ensure readable contrast ratios
• Test responsive behavior

Example Configurations #

Customer Support Bot #

System Prompt Example:
You are a customer support specialist for our online store. You have access
to our product catalog and FAQ information. When helping customers:
1. Always greet them professionally
2. Ask clarifying questions when needed
3. Provide specific product information when available
4. Escalate to human support for complex issues
Available product information: [[product-node]]
FAQ data: [[faq-node]]

Knowledge Base Assistant #

System Prompt Example:
You are a knowledge base assistant with access to our documentation.
Your primary role is to:
1. Help users find relevant documentation
2. Explain technical concepts clearly
3. Provide code examples when appropriate
4. Guide users to additional resources
Documentation content: [[docs-node]]

Troubleshooting #

Common issues and solutions:

1. Chat Not Loading:
   • Verify workflow is properly saved and executed
   • Check browser console for errors
   • Confirm shortcode is correctly formatted
2. Styling Issues:
   • Ensure theme compatibility
   • Check custom CSS conflicts
   • Verify responsive settings
3. Response Issues:
   • Validate system prompt
   • Check node connections
   • Verify AI model settings

Technical Specifications #

• Supported Browsers: Chrome, Firefox, Safari, Edge (latest versions)
• Minimum WordPress Version: 5.8
• Required PHP Version: 7.4 or higher
• Data Storage: Messages stored in WordPress database
• API Dependencies: OpenRouter API for AI model access

Privacy Considerations #

1. Data Storage:
   • Chat histories stored in WordPress database
   • Option to disable history persistence
   • Regular cleanup of old messages
2. User Privacy:
   • No personal data collection by default
   • Configurable data retention periods
   • Compliance with GDPR requirements