Best practices

The in-app Prompt Tips sidebar and Example prompt — quoted verbatim from `assets/js/pages/App/Chatbot/Edit.jsx`.

The chatbot editor (/app/chatbots/:id/edit) has a sidebar next to the System Prompt textarea. Everything below is a verbatim quote of what that sidebar contains — no editorial additions.

System Prompt card

The card that holds the textarea has:

  • Heading: System Prompt
  • Subheading: "Instructions your chatbot follows in every conversation"
  • A Use a Template / Hide Templates toggle button
  • A 10-row textarea with placeholder "You are a helpful assistant for [Company Name]. Your role is to..."
  • A character feedback line below the textarea:
    • When the prompt is non-empty: "{N} characters"
    • When the prompt is empty: "No prompt set — the chatbot will use a generic helpful assistant prompt"

Prompt Tips (verbatim)

Sidebar card titled Prompt Tips. Items come from the PROMPT_TIPS array in Edit.jsx:

  1. "Define a clear role: \"You are a customer support agent for [Company]\""
  2. "Set boundaries: what the bot should and shouldn't discuss"
  3. "Specify tone: friendly, professional, casual, formal"
  4. "Add escalation rules: when to hand off to a human"
  5. "Include key info: business hours, return policy, pricing"

Example prompt (verbatim)

A dashed callout beneath the tips, header Example prompt:

"You are the support assistant for Acme Inc. Answer questions about our products using the provided context. Be friendly and concise. If you don't know the answer, say so and offer to connect them with our team at support@acme.com. Our business hours are Mon-Fri 9am-5pm EST."

Clicking Use a Template reveals a 2-column gallery. Each card renders template.icon, template.name, and a two-line-clamped template.description. Clicking a template runs:

applyTemplate(template) {
  setData("chatbot", {
    ...data.chatbot,
    prompt: template.prompt,  // only the prompt is replaced
  })
  setShowTemplates(false)
}

Only the prompt field is replaced — name, website, description, and every widget-related field are untouched. The 7 seeded templates are defined in priv/repo/seeds/templates.exs.

Saving

The submit button shows:

  • Default label: Save Changes
  • While submitting: "Saving..."

The form fires PUT /app/chatbots/:id with {name, website, description, prompt}.

← Previous
Create your first chatbot
Next →
Overview