Building Widget Integration: From Dashboard Button to Production Deploy

Sometimes the best features are the ones that make your users' lives dramatically easier. Today I want to share how we built and shipped a complete widget integration system for our MiniRAG dashboard – taking users from "I want to embed this bot" to having working code on their clipboard in under 30 seconds.

The Problem: Making Integration Effortless

Our users had chatbots they loved, but integrating them into their websites required digging through documentation, copying API endpoints, and manually crafting integration code. We needed to transform this multi-step research process into a single click.

The solution? An "Embed" button right on each bot card that generates ready-to-use integration snippets.

The Build: Three Tabs, One Smooth Experience

The Foundation

We started by adding a simple "Embed" button to our bot profile cards, strategically placed between "Try It" and "Delete" actions. This placement felt natural – users would first try their bot, then want to embed it.

<!-- Added to dashboard/index.html around line 202 -->
<button onclick="showEmbed(bot)" class="btn btn-outline-primary btn-sm">
  <i class="bi bi-code-square"></i> Embed
</button>

The Modal Magic

The real innovation came with our tabbed approach. Instead of overwhelming users with one giant code block, we created three focused integration methods:

1. Script Tag - Drop-in solution for any website
2. Custom Element - Clean, semantic HTML approach
3. Styling - CSS customization options

Each tab generates context-aware code snippets that auto-populate with:

• The current domain for API URLs and script sources
• The specific bot's ID and name
• Working authentication placeholders

function getEmbedSnippet(tab) {
  const origin = window.location.origin;
  const botId = embedBot().id;
  const botName = embedBot().name;
  
  switch(tab) {
    case 'script':
      return `<script src="${origin}/static/widget.js"></script>
<script>
  MiniRAG.init({
    botId: "${botId}",
    apiUrl: "${origin}",
    token: "YOUR_API_TOKEN_HERE"
  });
</script>`;
    // ... other cases
  }
}

The UX Polish

We added a "Copy Snippet" button that provides instant clipboard functionality with toast feedback. No more manual text selection and hoping you got all the code.

The cherry on top? Help text that directly links to our API Tokens page, removing another potential friction point in the integration journey.

The Deploy: From Code to Production

What I love about this feature is how smoothly it went from development to production. Our deployment pipeline handled everything:

• Commit 1 (8dbfd61): Initial embed button and modal structure
• Commit 2 (d35d782): Tabbed integration methods and snippet generation
• Auto-deploy: GitHub Actions → VPS SSH deployment workflow

Both commits deployed seamlessly, with all 77 tests passing throughout the process.

Lessons Learned

The biggest surprise was how few obstacles we hit. The most significant "pain point" was a minor environment issue where we needed to use .venv/bin/python instead of python for running tests – hardly a roadblock.

This smooth experience reinforced something important: when you have solid infrastructure (testing, deployment pipelines, consistent state management), adding new features becomes remarkably friction-free.

What's Next

We're planning some UX enhancements:

• Manual QA across different browsers (Chrome, Safari, Firefox)
• Testing clipboard functionality in various environments
• A potential dark/light theme preview toggle for the Styling tab

But honestly? The feature feels complete as-shipped. Sometimes the best indication of good software is when there's not much left to do.

The Bigger Picture

This feature represents something larger than just an embed button. It's about reducing the activation energy for integration. Every step we can eliminate between "interested user" and "integrated user" directly impacts adoption.

The three-tab approach acknowledges that different developers have different preferences and constraints. The script tag user wants simplicity. The custom element user wants semantic markup. The styling tab user wants control. By serving all three, we make our widget accessible to a much broader range of integration scenarios.

---

The complete feature is live on mini-rag.de – try creating a bot and clicking the Embed button to see it in action.