Embed Your Landing Page

Kitsuite-Hosted Page {#hosted}

Every kit automatically generates a hosted page on Kitsuite, available at /p/{your-kit-slug}. No CMS or external hosting required.

What the page includes

  • Your full landing page (headline, benefits, CTA)
  • A built-in lead capture form (first name + email)
  • Your branding (colours and logo if set up)

Enable ESP sync

When a visitor submits the form, Kitsuite can automatically add the contact to your Brevo or MailerLite list.

  1. Go to Dashboard > Integrations
  2. Connect your ESP (Brevo or MailerLite) by entering your REST API key
  3. Return to your kit — new leads are automatically added to the dedicated list

Note: For Brevo, use a REST API key (prefix xkeysib-), not your SMTP credentials. Find it under Settings > API Keys.

Import Gutenberg Blocks into WordPress {#gutenberg}

Kitsuite generates a gutenberg.html file containing your landing page with native WordPress block comments (<!-- wp:heading -->, <!-- wp:list -->, etc.). This format can be pasted directly into the editor.

Steps

  1. Download the Gutenberg HTML file from the Kitsuite editor
  2. Open WordPress and create a new page (Pages > Add New)
  3. In the Gutenberg editor, click the three dots in the top right → Code editor
  4. Select all existing content and replace it with the contents of the .html file
  5. Switch back to the Visual editor to check the rendering
  6. Add your sign-up form (recommended plugin: WPForms, Fluent Forms, or your email plugin)
  7. Publish the page

Tip: Install a plugin like Rank Math or Yoast SEO to set the title and meta description of your capture page before publishing.

Customise Colours

Imported blocks use your theme's default styles. To apply your brand colours, use the colour options in the right sidebar of Gutenberg on each block.

Import into Elementor {#elementor}

Kitsuite generates an elementor.json file compatible with Elementor's native import.

Steps

  1. Download the Elementor JSON file from the Kitsuite editor
  2. In WordPress, create a new page and open it with Elementor
  3. Click the hamburger icon (☰) in the top left → Import a template
  4. Select the My Device tab and import the .json file
  5. Click Insert to place the blocks on the page
  6. Customise colours, fonts, and images from the left panel
  7. Add an Elementor Form widget or connect your email plugin
  8. Save and publish

Note: JSON import requires Elementor (free version is sufficient for basic blocks). Some advanced features (native forms, animations) require Elementor Pro.

Use the HTML in Other Tools {#autres}

The landing-page.html file is a standalone HTML file with embedded CSS. It works without any external dependency.

Webflow

  1. In Webflow, create a new page
  2. Add an Embed element (HTML)
  3. Paste the contents of the HTML file into the embed field
  4. Adjust styles via the Webflow panel or by editing the CSS in the <style> tag

Alternatively, use Webflow > Pages > Custom Code to inject the HTML into the <body>.

Framer

  1. In Framer, add a Code component
  2. Paste the HTML as a React component or use the Embed option
  3. Framer supports native HTML/CSS in code components

Squarespace

  1. Create a new page of type Blank
  2. Add a Code block (available on Business plans and above)
  3. Paste the HTML content
  4. Adjust the layout via Squarespace block options

Systeme.io, Learnybox, Podia

These all-in-one platforms generally have a native landing page editor. Use the Markdown file as a writing base to copy-paste content into their editor.

Static Site (Netlify, Vercel, GitHub Pages)

Rename the landing-page.html file to index.html, drop it in your repository or drag it into the Netlify Drop interface. Your page is live in under a minute.

←
Previous
Use Your Lead Magnet
Next
Set Up Your Email Sequence
→