Skip to main content

How to create a custom Ambassador landing page with AI tools

Personalize your application page with brand storytelling, visuals, and AI-generated code

Updated over a week ago

Creating a custom Ambassador landing page helps you attract influencers and grow your community. By adding HTML & CSS code to the "Additional Details" box, you can design a fully personalized page using AI tools like ChatGPT or Claude, complete with your custom branding.

This guide walks you through how to:

  • Generate custom HTML/CSS code using AI tools

  • Add the code to your landing page settings

  • Replace placeholder images with your brand assets

  • Preview and publish your customized page

Part 1: Generate custom code using AI tools

Step 1: Use the AI prompt template

  1. Log in to your preferred AI tool (ChatGPT, Claude, etc.)

  2. Start a new conversation

  3. Copy and paste the template below, customize the prompt with your brand identity

    • Replace these placeholders with your brand details:

      • SECTOR_OF_ACTIVITY → your industry

      • YEAR → your founding year

      • TOWN, COUNTRY → your brand HQ

      • FOUNDER(S) → names of your founders

      • MODEL_OF_REVENUE → e.g., “direct-to-consumer” or “subscription”

      • WHAT YOU SELL → a short product description

      • YOUR_ADDED_VALUE → highlight what makes your brand unique

  4. After replacing the placeholders with your brand details, press send

{{MY BRAND}} is a {{SECTOR_OF_ACTIVITY}}, founded in {{YEAR}} in {{TOWN}}, {{Country}}, by {{FOUNDER(S)}}. Operating on a {{MODEL_OF_REVENUE}}, {{MY BRAND}} delivers {{WHAT YOU SELL}}.

{{MY BRAND}} is unique because {{YOUR_ADDED_VALUE}}

Your role is to code the entire ambassador landing page.

- You must edit the text content related to the brand above

- You need to provide me the full answer, not just a portion of it

- You must keep the exact same html and css as the code bellow :

 ​<div style="font-family: Arial, sans-serif; line-height: 1.6; margin: 0 auto; max-width: 800px; padding: 20px; color: #333;">

<section style="margin-bottom: 30px;">

<div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

Why Collaborate with My Sparkling Gems? 💎

</div>

<div style="margin-bottom: 30px;">

<p style="font-size: 18px;">

Elevate your style with exquisite jewelry pieces from My Sparkling Gems. We offer meticulously crafted and uniquely designed fine jewelry, delivered with passion and care, starting at €99.

</p>

<p style="font-size: 18px;">

Embrace elegance and craftsmanship. My Sparkling Gems brings you timeless beauty, perfect for special occasions or everyday luxury. Discover the joy of wearing stunning jewelry that speaks to your unique personality. ✨

</p>

<p style="font-size: 18px;">

Partner with My Sparkling Gems to shine even brighter. Our commitment to ethically sourced gemstones and metals ensures not just glamour but also sustainability. Join us in promoting responsible and exquisite beauty. 💍🌿

</p>

</div>

</section>

<section style="margin-bottom: 30px;">

<div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

My Sparkling Gems Ambassador Program ✨

</div>

<div style="margin-bottom: 30px;">

<p style="font-size: 18px;">

As an ambassador for My Sparkling Gems, you'll receive:

</p>

<ul style="font-size: 18px;">

<li>Attractive commission on each successful sale through your personalized referral link. 💰</li>

<li>Access to our exquisite collection of jewelry to showcase to your audience. 💎📸</li>

<li>The opportunity to collaborate with a distinguished luxury brand, cherished by jewelry enthusiasts worldwide. 🤝🌍</li>

<li>Support for your commitment to sustainable and responsible fashion. 🌱💫</li>

</ul>

</div>

</section>

<section style="margin-bottom: 30px;">

<img src="ILLUSTRATION1.jpg" alt="My Sparkling Gems Image" style="max-width: 800px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: block; margin: auto; width: 100%;">

</section>

<section style="margin-bottom: 30px;">

<div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

FAQ ❓

</div>

<div style="margin-bottom: 30px;">

<div style="margin-bottom: 15px;">

<strong style="font-size: 20px;">How does the My Sparkling Gems ambassador program work?</strong>

<p style="font-size: 18px;">

Once you're accepted into the program, you'll receive a unique referral link. Promote our exquisite jewelry through this link, and earn commission on each successful purchase made by your referrals.

</p>

</div>

<div style="margin-bottom: 15px;">

<strong style="font-size: 20px;">What kind of content should I create as a My Sparkling Gems ambassador?</strong>

<p style="font-size: 18px;">

Showcase the elegance and beauty of our jewelry pieces in your content. Highlight the craftsmanship, uniqueness, and the stories behind each piece. Let your creativity reflect the allure of My Sparkling Gems! 📸✨

</p>

</div>

</div>

</section>

<section style="margin-bottom: 30px;">

<div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

Ambassador Testimonials 🗣️

</div>

<div style="margin-bottom: 30px;">

<div style="padding: 20px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">

<div style="display: flex; align-items: center; margin-bottom: 10px;">

<img src="Profile_picture1.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">

<strong style="font-size: 20px;">Emily, Jewelry Enthusiast</strong>

</div>

<div style="font-size: 18px;">

<p>

"Being a My Sparkling Gems ambassador is a dream come true. The jewelry is not only exquisite but also tells stories. Collaborating with a brand that values beauty, sustainability, and elegance is a privilege!" 💎💫

</p>

</div>

</div>

<div style="padding: 20px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">

<div style="display: flex; align-items: center; margin-bottom: 10px;">

<img src="Profile_picture2.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">

<strong style="font-size: 20px;">Alex, Style Blogger</strong>

</div>

<div style="font-size: 18px;">

<p>

"My Sparkling Gems has brought an extra layer of elegance to my style blog. Their jewelry adds that perfect touch of sophistication, and I'm proud to represent a brand that emphasizes both beauty and ethics." 💍🌟

</p>

</div>

</div>

</div>

</section>

</div>

<section style="margin-bottom: 30px;">

<img src="ILLUSTRATION2.jpg" alt="My Sparkling Gems Image" style="max-width: 800px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: block; margin: auto; width: 100%;">

</section>

<div style="max-width: 800px; margin: 0 auto; padding: 20px;">

<section style="margin-bottom: 30px;">

<div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

How to Become a My Sparkling Gems Ambassador? 📝

</div>

<div style="margin-bottom: 30px;">

<p style="font-size: 18px;">

Joining our ambassador program is simple. Fill out the application form and let us know about your passion for jewelry and your commitment to sustainable luxury. We're excited to welcome you to the My Sparkling Gems family! 💎🌱

</p>

</div>

</section>

</div>

<p style="text-align: center;">

Connect with Us - Ambassadors - Terms and Conditions - Privacy Policy - © My Sparkling Gems 2023

</p>

Example for a luxury watch brand:

Timeless Elegance is a luxury watch company, founded in 1995 in Geneva, Switzerland, by master watchmaker Robert Cartier. Operating on a direct-to-consumer model, Timeless Elegance delivers handcrafted timepieces that blend precision with sophistication.

Our brand is unique because of our commitment to innovation, heritage craftsmanship, and timeless design.

Step 2: Review and copy the generated code

Once the AI tool generates your custom HTML/CSS code, review it to ensure:

  • All brand information is correctly incorporated

  • The content flows naturally and represents your brand voice

  • All sections are complete

Copy the entire generated code for the next step.

Part 2: Add code to your Landing page settings

  1. Go to your Ambassador landing page settings

  2. Toggle "Additional details" to ON

  3. Select "Custom Code (HTML & CSS)" as the option

  4. Paste the generated HTML & CSS code into the text box

Part 3: Replace placeholder images

  1. Your generated code will contain placeholder images 👇 that need to be replaced with actual URLs.

    php-templateCopyEdit<img src="ILLUSTRATION1.jpg">

  2. Replace these with actual image URLs hosted on publicly accessible platforms.

Where to find image URLs:

  • Method 1: Google images

    1. Search for suitable images on Google Images

    2. Right-click on the image you want to use

    3. Select "Copy image address"

    4. Use this URL in your code

  • Method 2: Image hosting platforms

    • Upload images to platforms like Imgur, Google Drive (public), or your website

    • Ensure images are publicly accessible

Image guidelines:

  • Ensure illustrations are wide format (horizontal).

  • Profile pictures should be square.

Example:

php-templateCopyEdit<img src="https://example.com/mybrand-banner.jpg">

Part 4: Preview and publish

  1. Click "Preview" to see how your landing page looks

  2. Check that:

    • All images display correctly

    • Text content is accurate and well-formatted

    • The overall design matches your brand

  3. Make any necessary adjustments by editing the code

  4. Once satisfied, click "Save & Publish" 🎉

Tips for success

Did this answer your question?