## Overview

[Replacing Popups with Chatbots: A Cleaner Way to Collect Emails](https://www.youtube.com/watch?v=Isj_PcBVdD0)

In this post we walk you through how we replaced an old-school newsletter popup with a friendly chatbot using **Flowise** and **n8n**.

## The Problem with Popups

Popups work - but they’re annoying. They interrupt the user experience and often get dismissed before they’re even read.

We wanted a better way to invite users to subscribe to the *[Weekly Automator](https://tinyautomations.com/newsletter)* newsletter without being intrusive.

## The Chatbot-Based Solution

Instead of a popup we embedded a chatbot in the bottom-right corner of the page. When users engage with it they’re asked if they want to join the newsletter. If they say yes, they can drop in their email and the automation does the rest.

Here’s how it works behind the scenes:

### Flow Overview

```mermaid
graph TD
    User -->|enters email| Chatbot
    Chatbot -->|extracts email| Flowise
    Flowise -->|POST to webhook| n8n
    n8n -->|add to list| ConvertKit
```

---

## 🔧 Step-by-Step Breakdown

### Step 1: Flowise Chatbot

We're using **Flowise v3.0** which made setting this up really simple.

- The chatbot has a **start node** that captures input
- It then calls an **agent node** that extracts the email from the user response
- If valid it POSTs the email to an `n8n` webhook

```mermaid
graph LR
    StartNode["🟢 Start Node (Chat Input)"] --> ExtractNode["🔍 Extract Email"]
    ExtractNode --> PostNode["📤 HTTP Request to n8n Webhook"]
```

### Step 2: n8n Workflow

Once Flowise sends the data n8n takes over.

- The webhook receives the email address
- n8n uses the **Kit** (ConvertKit) node (or HTTP Request if you're using the API directly)
- It adds the user to a specified list in your ConvertKit account

We don't cover it in the video fully but you should always secure your webhook endpoint.

Example node flow:

```mermaid
graph TD
    Webhook --> email["Extract email from body of request"]
    email["Extract email from body of request"] --> ConvertKitAPI
```


---

## Why This Works Better

- **No interruptions**: Users engage when *they* want to.
- **Feels human**: The chatbot is conversational, not transactional.
- **Flexible**: You can enhance or extend the chatbot without touching the front end again.

---

## Try It Yourself

You can build your own version using:

- [Flowise](https://flowiseai.com)
- [n8n](https://n8n.io)
- [ConvertKit](https://convertkit.com)

Want help setting this up? [Book a call](https://tinyautomations.com/#pricing) with us—or just steal the idea 😉

---

*These 2 automations are small, reusable, and orthogonal - the Tiny Automations way.*

This post shows how to replace intrusive newsletter popups with a conversational chatbot using Flowise and n8n. It walks through the full setup—from capturing the user’s email with a chatbot to adding it to ConvertKit

Learn how to automate with flowise