INTRODUCING

AI Chatbot

Show an AI-powered live chat box that responds in real time.

How to use Chatbot widget

Drag and Drop the Unlock-Addons Chatbot widget to the Elementor Editing Panel.

AI Assistant
Hello! How can I help you today?
1. Add the Widget
  • From the WordPress dashboard, open a page or template with Edit with Elementor.
  • In the Elementor panel, search for “AI Chatbot”.
  • Drag and drop the widget into the section where you want the chatbot to appear (usually bottom-right corner or inside a support section).
2. Basic Setup (Content → General)
  • Chatbot Title / Name – Set a friendly name for your bot (e.g. “Unlock Assistant”, “Support Bot”).
  • Welcome Message – The first message users see when they open the chat (e.g. “Hi! How can I help you today?”).
  • Placeholder Text – The hint text inside the input box (e.g. “Type your question here…”).
  • Language / Tone (if available) – Choose the default language and tone (Friendly, Professional, etc.).
3. AI Configuration (Model / API Settings)

Label names may vary slightly depending on your plugin version, but you will typically see options like:

  • Provider / Model – Select which AI service you are using (e.g. OpenAI or another API provider).
  • API Key – Paste your secret API key from the provider’s dashboard.
  • System Prompt / Base Instructions – Tell the AI what its role is and how it should answer:
    • Example: “You are the support assistant for the Unlock Addons plugin. Always answer clearly and concisely. You can respond in English.”
  • Max Tokens / Max Response Length – Limit how long each answer can be so the bot does not produce extremely long messages.
  • Temperature – Controls creativity:
    • Low (0–0.3) = more focused, predictable answers.
    • Higher (0.7+) = more creative, varied answers.
4. Chatbot Behavior (Triggers & Position)
  • Open Type:
    • Always Visible Panel – Chat window is always visible on the page.
    • Floating Button – A small icon/button that opens the chat window when clicked.
  • Position – Choose where the chatbot appears (Bottom Right, Bottom Left, etc.).
  • Auto Open on Page Load – Decide if the chat window should open automatically after the page loads (optionally with a delay).
  • Show on Devices – Select which devices will show the chatbot (Desktop, Tablet, Mobile).
5. Context & Knowledge Base (Optional)
  • Website Context / Docs URL – If available, add links to your docs or important pages so the bot can answer based on that information.
  • Predefined FAQs – Add common questions and quick actions (chips/buttons) that users can click to send a preset question.
6. Chat UI Design (Style Tab)
  • Chat Window – Adjust background color, border radius, and shadow so it matches your theme.
  • Header – Customize the chatbot name, avatar/icon, header background, and text color.
  • User Message Style – Set bubble color, text color, and border radius for the user’s messages.
  • Bot Message Style – Set a different bubble color and text color for the bot, so messages are clearly distinguishable.
  • Input Box & Send Button – Style the input field (border, background, placeholder color) and send button (icon, size, colors, hover effects).
  • Floating Button (if used) – Customize its size, icon, primary color, and hover/active styles.
7. Advanced Tips
  • Write a clear system prompt: The clearer your instructions, the better the chatbot behaves (what it should answer, what it should avoid).
  • Control answer length: If you want short replies, mention it in the system prompt (e.g. “Answer in 2–4 short sentences.”).
  • Brand tone: Describe your brand voice (friendly, formal, playful) so answers stay consistent.
  • Iterate & improve: Test with real questions, then fine-tune the prompt, temperature, and context to get better results.
8. Pre-Launch Checklist
  • Verify that your API key is valid and not rate-limited.
  • Test several example questions (product info, pricing, support) and confirm the answers make sense.
  • Check the layout on both desktop and mobile devices to ensure the chat UI looks good and doesn’t overlap important content.
  • If needed, update your Privacy Policy or Terms to mention that AI is used to answer chat questions.

The Largest and Most Powerful Elements Library for Elementor.

Subscribe to Our Newsletter

    © 2014 – 2026 Unlockaddons. All Rights Reserved