The plan is to place a prominent “AI Recipe Finder” call-to-action (CTA) in your navigation menu that opens the AI assistant in a pop-up modal, and also embed the AI assistant directly on your homepage for easy access.
Let’s get started!
Step-by-Step Implementation
When adding the AI assistant, we’ll use a test environment for safety. If you’d like a copy of the test site to follow along, click here. It’s a great way to practice and make sure everything looks right.
Now, on to the steps!
Copy the AI Recipe Finder Pop-up Template.
Most of the heavy lifting is made easy by starting with a pre-built template.
- In the LeadsWithDemos interface, go to the Site section in the left sidebar, then navigate to Popup & Forms.
- There, switch to the Popup Templates tab. Use the search bar to find a template called something like “AI Recipe Finder | Button Click | 1”.
- Once you locate this template (which is a pre-designed pop-up box for our recipe finder), copy it into your workspace:
- Click the three-dot menu on the template card and choose “Copy to Popup & Forms”. This will import the template into your list of editable pop-ups.
- Switch to the Popup & Forms tab (where your copied pop-ups live) and search for “AI Recipe” to quickly find the one you just copied.
After this step, you have a new pop-up in your account, ready to be customized. It contains a layout for the AI Recipe Finder and even a space for an image or ad banner. We’ll customize it next.
Enable the Pop-up as a Lead Gen Form.
Now that you have the pop-up template, we need to mark it as a Lead Generation form.
This setting is important because it allows the pop-up to be triggered by our campaign later (even though in this case we aren’t using a traditional form to collect emails upfront).
- In the list of pop-ups, find your newly copied “AI Recipe Finder” pop-up.
- Click the three-dot menu on that pop-up’s card and select “Set as Lead Gen Form”.
Making it a Lead Gen Form doesn’t mean we’re forcing an email form on the user; it’s just a way to tell the system this pop-up will be used in a lead capture campaign.
Think of it like arming the pop-up with the capability to track engagement, and a modal display of the AI Recipe Finder.
Pitfall to Avoid: Don’t skip the “Set as Lead Gen Form” step. If you leave this pop-up as a regular modal and proceed, you might find that your campaign trigger won’t fire at all.
At this point, you’ve got a pop-up template, and it’s flagged for lead gen. Next, we’ll actually place our AI Recipe Finder into that pop-up.
Embed the AI Recipe Finder into the Pop-up.
Now we’ll add the AI assistant itself. The AI Recipe Finder assistant should be available in your LeadsWithDemos AI Assistants section, since you created it in the “How to Create an AI Recipe Finder Assistant” tutorial.
Essentially, we’ll grab the embed code (an iframe) for the assistant and drop it into the pop-up’s content area.
Here’s how to do it:
- In the left sidebar of the platform, click on AI Assistants (this is where all your AI chat assistants are listed).
- Select your recipe assistant (for example, it might be named “AI Recipe Finder Assistant”). This opens the assistant’s detail page.
- Look for an option like “Embedded AI” in the assistant’s left-hand menu. In LeadsWithDemos, expand the Chat Interface section within the assistant, then click “Embedded AI”.
- You should see an embed code snippet. Click inside that code box to copy the full iframe code. It will look something like:
- Now, go back to Site → Popup & Forms, and under your list of pop-ups, find the AI Recipe Finder pop-up we copied (it should be the one marked as Lead Gen). Click on Design to edit it.
- In the pop-up editor canvas, click on the large content area where we want the AI to appear. It’s an HTML block in the template.
- On the right sidebar (wherever the editor shows HTML content), paste the iframe code you copied. You can adjust the width or height in the code if needed (e.g., height=”560px” is a good start, but you might tweak it to fit your design).
- Save your changes and use the Preview function to ensure the AI assistant loads correctly inside the pop-up. You should see the chat interface of your AI Recipe Finder ready to go.
Now your AI Recipe Finder is embedded in the pop-up modal. When this modal opens, it will display the AI recipe search assistant that readers can interact with.
At this stage, the pop-up is still only a design, we haven’t made it appear on the site yet.
Next, we’ll set up the trigger that launches this pop-up when readers click our navigation link.
Optional: Add an Image or Banner to the Pop-up.
The template we used had a two-column design; one side for the AI chat, and another side that could show an image (like a cooking-themed graphic or even an advertisement).
If you want to utilize that space (for example, to display an ad or a nice picture of a dish), you can replace the placeholder image:
- While editing the pop-up (in the Design view), click on the image block on the right side of the modal.
- Upload your desired image. Ideally use a tall, rectangular image (for instance, 200×600 pixels) so it fits nicely in the side column without pushing the layout.
- Apply the change and save. The pop-up will now show your chosen image next to the AI assistant. This is a great way to maintain some branding or monetization (think sponsored banner or your own product) while the user interacts with the AI.
Create a Campaign to Activate the Pop-up.
This step ties everything together. We have the pop-up and the AI ready, but we need a campaign to actually trigger the pop-up when someone clicks the “AI Recipe Finder” button on the site.
In LeadsWithDemos, campaigns make pop-ups and forms operational. We’ll set up a campaign to activate our pop-up and specify what happens afterward..
Go to the Marketing → Campaigns section in the platform’s sidebar and click Add new campaign. We’ll go through several configuration steps:
- Basic Details: Give your campaign a name (something descriptive like “AI Recipe Finder – Button Click Campaign”). For Lead capturing source, select Popups and Forms since our target is the pop-up form we created. You can add a short description if you like (e.g., “Triggers the AI Recipe popup on nav button click”). Then click Continue.
- Choose Pop-up/Form: Now the builder asks which lead capture form to use in this campaign. Select your AI Recipe Finder pop-up from the dropdown list. (It should appear because we marked it as a Lead Gen Form earlier.) This tells the campaign, “When triggered, show this pop-up to users.” Click Next after selecting the pop-up.
- After-Capture Behavior: Although the pop-up is ungated and has no form submission, the campaign still requires an after‑capture setting. Select “Traditional Form Submission” as the lead magnet type, then choose “Display thank‑you message only”. Leave the message field blank (it won’t show because there’s no email capture form). Click Next.
- Lead Quality Settings (Optional): The platform will offer email validation and quality checks. Since our pop-up doesn’t actually collect an email on submission (there’s no email field at all), make sure any email validation or spam prevention toggles are OFF. We don’t need these for an ungated tool. Click Next.
- Field Mapping: This step is usually for mapping form fields to subscriber attributes. We have no fields in this pop-up form (again, because it’s an AI chat, not a form). So you can simply proceed without changes. Click Next.
- Review and Publish: We are at the end of the campaign setup. Toggle the campaign on, then click Finish to activate it.
Once activated, the campaign is live. However, it won’t do anything until a trigger fires. We’ll use a button click to open a pop-up modal with the AI assistant.
Now we need to make sure the website has that button!
Add the “AI Recipe Finder” to Your Site’s Navigation and Homepage.
With the back end configured, let’s put the front-end piece in place. To that end, watch the video below for a walkthrough using a test environment.