Quickstart

Standard HTML Guide

Learn how to add Supascribe embeds to any website using pure HTML to grow your Substack audience.

Custom Embeds can be added to any HTML website. Follow this guide to integrate Supascribe and start growing your newsletter audience.

Step-by-Step Guide

1. Get your embed code

First, you'll need to create and publish an embed in your Supascribe dashboard:

  1. Log into your Supascribe dashboard at supascribe.com
  2. Click "Create Embed" to start building your email capture form
  3. Customize your embed with your style, colors, and messaging
  4. Click "Publish Embed" to generate your unique embed code

After publishing, you'll see your embed code that looks like this:

<!-- Subscribe embed code -->
<div data-supascribe-embed-id="example" data-supascribe-subscribe></div>

<!-- Supascribe Script (Only add this to your site once) -->
<script src="https://js.supascribe.com/v1/loader/example.js" async>< script>

2. Copy your embed code

Copy the embed code that was generated when you published your embed:

We recommend adding the Supascribe Script immediately before your site's closing </body> tag. This only needs to be added once to your site. If the script tag is already present, you do not need to add it again.

3. Add the embed to your HTML website

Option A: Adding to an existing HTML page

  1. Open your HTML file in a text editor or code editor
  2. Locate the closing </body> tag in your HTML
  3. Add the script tag immediately before the closing </body> tag (only once per site)
  4. Add the embed div where you want the form to appear in your HTML
  5. Save the file and upload it to your web server

Example implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    
    <main>
        <p>Your content here...</p>
        
        <!-- Add your Supascribe embed here -->
        <div data-supascribe-embed-id="example" data-supascribe-subscribe></div>
        
        <p>More content...</p>
    </main>
    
    <footer>
        <p>&copy; 2024 Your Website</p>
    </footer>
    
    <!-- Supascribe Script (Only add this once per site) -->
    <script src="https://js.supascribe.com/v1/loader/example.js" async></script>
</body>
</html>

Option B: Adding to a dynamic website

If you're using a server-side language (PHP, Node.js, etc.):

  1. Include the script tag in your main layout or template file
  2. Add the embed div to any page where you want the form to appear
  3. Ensure the script loads on every page where you use the embed

Option C: Adding to a single-page application (SPA)

For React, Vue, Angular, or other SPAs:

  1. Add the script tag to your main HTML file (usually index.html)
  2. Add the embed div to your component or page where you want the form
  3. Ensure the script loads before your JavaScript framework

Troubleshooting

Embed not showing up?

  • Make sure you've added the script tag before the closing </body> tag
  • Check that your embed ID is correct
  • Try refreshing the page and clearing your browser cache
  • Verify the script is loading by checking the browser's developer tools

Styling issues?

  • The embed is fully customizable within your Supascribe Embed Dashboard
  • Check for CSS conflicts with your existing styles
  • Overwrite CSS using !important after the CSS value

Script loading problems?

  • Check your browser's console for JavaScript errors
  • Ensure the script URL is accessible and not blocked
  • Verify your website's content security policy allows the script

Best Practices

Performance

  • Place the script tag at the bottom of your HTML for faster page loading
  • Use the async attribute to prevent blocking page rendering
  • Only include the script once per website, not on every page

Accessibility

  • Ensure your embed is accessible to screen readers
  • Maintain proper color contrast ratios for brand coherancy

Mobile Optimization

  • Test your embed on mobile devices
  • Ensure the form is responsive and touch-friendly
  • Check that text is readable on small screens

Need Help?

If you're stuck or need help implementing Supascribe on your HTML website, feel free to reach out using our live chat or contact me directly.

[email protected]

0xGideon

Explore More Features

Email Embed

Add an email capture form to Squarespace, WordPress, Shopify, or any website.

Feed Embed

Show your latest newsletter issues directly on your site with one line of code.

Popup Modal Embed

Track views, conversions, and subscriber growth from your embeds.

Request an Embed

Got an idea on what we could build next? Get in Touch!

Was this page helpful?

Next