How to Embed a Beehiiv Blog into Webflow

In this tutorial, we'll guide you through embedding an RSS feed from your blog (e.g., Beehive) into your Webflow site using custom code.

October 03, 2024

Step-by-Step Guide:

Locate your Beehiiv RSS feed URL:

  • Go to settings > publication > RSS Feed from your Beehiiv dashboard to create and copy an RSS feed url:

Add the Embed Block:

  • Navigate to your website’s Webflow's editor and click on the Add Elements button.

  • Search for Code Embed and drag the code embed block to the section where you want the RSS feed to appear.

Using Custom Code:

  • Next, you'll add the custom HTML, CSS, and JavaScript code that fetches and displays your RSS feed. This example uses rss2json.com to convert your RSS feed into JSON format.

Create the Custom Code:

  • Copy the code below and paste it into the code embed block on Webflow. 

<div id="rss-feed" style="width: 100%;"></div>

<style>
    .article-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        margin-bottom: 10px;
        background-color: rgba(255, 255, 255, 0.4);
        border: 1px solid #e0e0e0;
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .article-row:hover {
        background-color: #e0e0e0;
    }
    .content {
        flex: 1;
        padding-right: 20px;
    }
    .article-row h3 {
        font-size: 1.5rem;
        margin-top: 0;
        color: #333;
    }
    .article-row p {
        font-size: 1rem;
        color: #655;
    }
    .image-container {
        flex-basis: 30%;
        padding: 10px;
    }
    .article-image {
        width: 100%;
        height: auto;
        border-radius: 15px; /* Rounded image */
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
        .article-row {
            flex-direction: column; /* Stack elements vertically */
            text-align: center; /* Center text and image */
        }
        .content {
            padding-right: 0;
        }
        .image-container {
            flex-basis: auto;
            padding: 0;
            margin-top: 10px;
        }
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        var rssToJsonUrl = "https://api.rss2json.com/v1/api.json?rss_url=YOUR_RSS_URL_HERE";

        $.get(rssToJsonUrl, function(response) {
            if (response.items.length > 0) {
                var item = response.items[0]; // Only select the first item (most recent article)
                var title = item.title;
                var link = item.link;
                var description = item.description;
                var imageUrl = item.enclosure.link; // Ensure your RSS includes image links in the enclosure tag

                var feedHtml = `
                <a href="${link}" target="_blank" style="text-decoration: none; color: inherit;">
                    <div class="article-row">
                        <div class="content">
                            <h3>${title}</h3>
                            <p>${description}</p>
                        </div>
                        <div class="image-container">
                            <img src="${imageUrl}" alt="${title}" class="article-image">
                        </div>
                    </div>
                </a>`;
                $("#rss-feed").html(feedHtml);
            } else {
                $("#rss-feed").html("<p>No articles available.</p>");
            }
        }).fail(function() {
            $("#rss-feed").html("<p>Unable to load RSS feed. Please try again later.</p>");
        });
    });
</script>

Customize the RSS Feed:

  • Replace the rss_url in the JavaScript with your blog’s RSS feed URL where it says YOUR_RSS_FIELD_HERE (in XML format).

  • The HTML and CSS can be customized further using ChatGPT or another tool to match your website’s design.

  • NOTE: The code above works for our Beehiiv RSS feed, your results may differ if you’re using another blog or RSS feed.

  • Publish your website to see the feed, and you should see something like this:

Consider Privacy:

  • If your RSS feed contains subscriber-only or sensitive content, be cautious when using third-party services like rss2json.com. Make sure to review their privacy policy.

And that's it! You've successfully embedded an RSS feed into your Webflow site using custom code.