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.