Using the HTML Block in Info Pages

How to Add an HTML Block

1. Open your Info Page editor

2. Scroll to the special blocks and select "HTML"

3. You'll see two options: use the built-in AI assistant, or switch to the HTML tab to paste code directly

✨ Two Ways to Generate Your Code

Option A: Use the Built-in AI Assistant

Inside the HTML block, there's a built-in AI assistant. Just describe what you want in plain language:

"Create a styled banner with bold white text on an orange background that says: Limited spots available, apply now!"

You’ll immediately see a preview of the final result in the block below!

Not quite right? Just ask it to adjust:

"Make the background darker" or "Add rounded corners"

When you're happy with the result, hit “Save”, and the block will be added to your page. 

Option B: Use ChatGPT Externally

Go to ChatGPT and ask it to write the code for you:

"Write me a self-contained HTML + CSS snippet (no JavaScript) for [describe what you want]. It should be clean, mobile-friendly, and work as a standalone block on a page."

Then copy the result and paste it directly into the HTML tab.

💡 Something look off? Paste the code back into ChatGPT and say: "This isn't displaying correctly, can you fix it?" It will troubleshoot it for you.

🎨 Ideas: What Can You Add?

These are things you can't build with the standard blocks but are easy to create with the HTML block.

1. ⚡ Urgency Banner

A bold full-width banner to highlight a key message. Great for limited offers, deadlines, or important callouts.

Prompt to use:

"Create a full-width HTML + CSS banner with bold white text on a red/orange background that says: '🔥 Limited spots, apply before [date]'. Centered, no JavaScript."

2. 📊 Stats / Numbers Row

A clean row of 3–4 impressive numbers (like members, countries, years of experience). Much more impactful than writing them in a paragraph.

Prompt to use:

"Create an HTML + CSS stats row with 3 items: [500+ Members], [12 Countries], [5 Years]. Large bold numbers, small label underneath, evenly spaced, mobile-friendly."

3. 🏅 Trust / Guarantee Badge

A badge-style element that builds credibility, like "100% Free to Join" or "No Experience Needed".

Prompt to use:

"Create an HTML + CSS trust badge with a shield icon, bold headline '100% Free to Join', and a short subtitle: 'No experience needed, we'll guide you every step'. Centered, green and white."

4. 🎨 Section Divider with Title

A colour gradient band to visually separate sections of your page and add a professional touch.

Prompt to use:

"Create a full-width HTML + CSS gradient divider in purple and blue, with centered white text that says 'Why People Choose Us'. Clean and modern."

5. 🗺️ Embedded Map

If you have a physical location or event venue, embed a Google Map directly into your page.

How to get the embed code:

1. Open Google Maps and search for your location

2. Click Share then Embed a map and copy the HTML

3. Paste it into the HTML tab of your block

📊 Embedding Your Facebook Pixel

What is the Facebook Pixel?

The Facebook Pixel is a small piece of code you add to your page. Once active, it tracks who visits your Info Page and sends that data back to your Facebook Ads account. This lets you:

• Retarget visitors: show ads specifically to people who already viewed your page

• Build lookalike audiences: find new people similar to your existing visitors

• Measure your ad performance: see if your Facebook ads are actually driving traffic to your page

In short, if you're running Facebook ads, the Pixel turns your Info Page into a proper marketing tool.

Step 1: Get Your Pixel ID from Meta

1. Go to Meta Business Manager and log in

2. In the left-hand menu, click "All Tools"

3. From the menu that opens, scroll down and click "Events Manager"

4. In Events Manager, look for "Data Sources" in the left-hand menu and click on it, then select "Pixels"

5. You'll see your Pixel listed — the Pixel ID is the 15-16 digit number shown below the Pixel name

6. If you don't have a Pixel yet, click "Connect Data Sources" → "Web" and follow the setup steps

Step 2: Add the Pixel to Your Info Page

1. In your Info Page, add an HTML block

2. Switch to the HTML tab

3. Paste the following, replacing YOUR_PIXEL_ID with your actual ID:

html

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

4. Save the block

Step 3: Verify It's Working

1. Install the Meta Pixel Helper Chrome extension (free)

2. Visit your published Info Page

3. Click the extension icon. If it shows your Pixel ID with a green ✅, you're all set

⚠️ A Note on Privacy

If you're using the Facebook Pixel, make sure your page includes a brief mention of it, something like: "This page uses tracking tools to improve your experience." This keeps you compliant with privacy regulations like GDPR.

💬 Need Help?

If you need assistance with importing contacts or have questions about the process:

• Support Centre: Need help? Start a chat with the Fibi AI Agent in your SAGA. If they can’t help, a human team member will take over.

• Book a Call: Schedule a demo with our team