Widget 1777546734797

This preview shows how the widget will appear on your website. Click Here to copy your embed code.

Home

Product

Pricing

Contact

Blogs

Install our Framer Plugin

Use the Feedspace plugin, copy the below widget-id, and paste it into the desired section of your Framer site to display the widget.

To showcase your Widget on Framer, start by creating a custom component. Click the Framer logo in the top-left corner, navigate to Component → Create From Code. A popup will appear — enter a name for your component, select New Component, and click Create.

Click Assets to locate the FS_WIDGET component in the Components section. Drag and drop it to the desired location on your page to display the Widget. If required, update the layout settings (Fit, Fill, Fill Content, etc.) from the right-hand panel. Framer Step 2

Replace the default code with the code provided below.

import React, { useEffect } from "react"

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/developers/components/auto-sizing
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight auto
 */
export default function FS_WIDGET(props) {
    useEffect(() => {
        // Function to safely add the script
        const loadScript = () => {
            return new Promise((resolve, reject) => {
                // Create a script element
                const script = document.createElement("script")
                script.src =
                    "https://js.feedspace.io/v1/embed/embed.min.js?v=1.0.56"
                script.type = "text/javascript"
                script.async = true

// Handle script load and error
                script.onload = resolve
                script.onerror = reject

// Append the script to the document body
                document.body.prepend(script)
            })
        }

// Load the script and handle potential errors
        loadScript().catch((error) => {
            console.error("Failed to load Feedspace script:", error)
        })

// Cleanup the script when the component unmounts
        return () => {
            const script = document.querySelector(
                'script[src="https://js.feedspace.io/v1/embed/embed.min.js?v=1.0.56"]'
            )
            if (script) {
                document.body.removeChild(script)
            }
        }
    }, [])

return (
        <div
            style={{ ...containerStyle }}
            className="feedspace-embed"
            data-id="3c433f94-380a-439b-bd91-93d44e867674"
        ></div>
    )
}

// Styles are written in object syntax
const containerStyle = {
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}

import React, { useEffect } from "react"

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/developers/components/auto-sizing
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight auto
 */
export default function FS_WIDGET(props) {
    useEffect(() => {
        // Function to safely add the script
        const loadScript = () => {
            return new Promise((resolve, reject) => {
                // Create a script element
                const script = document.createElement("script")
                script.src =
                    "https://js.feedspace.io/v1/embed/embed.min.js?v=1.0.56"
                script.type = "text/javascript"
                script.async = true

                // Handle script load and error
                script.onload = resolve
                script.onerror = reject

                // Append the script to the document body
                document.body.prepend(script)
            })
        }

        // Load the script and handle potential errors
        loadScript().catch((error) => {
            console.error("Failed to load Feedspace script:", error)
        })

        // Cleanup the script when the component unmounts
        return () => {
            const script = document.querySelector(
                'script[src="https://js.feedspace.io/v1/embed/embed.min.js?v=1.0.56"]'
            )
            if (script) {
                document.body.removeChild(script)
            }
        }
    }, [])

    return (
        <div
            style={{ ...containerStyle }}
            className="feedspace-embed"
            data-id="3c433f94-380a-439b-bd91-93d44e867674"
        ></div>
    )
}

// Styles are written in object syntax
const containerStyle = {
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}

On Framer, click on 'Publish', then 'Update' to your change.

A live link will be displayed. Clicking it will navigate to the page where the widget is embedded.

Just copy this component to your project and use it anywhere:

// components/FeedspaceWOL.tsx

"use client";

import Script from "next/script";

interface FeedspaceWOLProps {
  pageId: string;
  className?: string;
}

export default function FeedspaceWOL({
  pageId,
  className = "",
}: FeedspaceWOLProps) {
  return (
    <>
      <div className={`feedspace-embed ${className}`} data-id={pageId} />

      <Script
        src={"https://js.feedspace.io/v1/embed/embed.min.js"}
        strategy="lazyOnload"
      />
    </>
  );
}

Import and use the component anywhere in your app:

import FeedspaceWOL from '@/components/FeedspaceWOL'

<FeedspaceWOL pageId="3c433f94-380a-439b-bd91-93d44e867674" />

Styling Examples (With Tailwind CSS)

<FeedspaceWOL
  pageId="3c433f94-380a-439b-bd91-93d44e867674"
  className="mx-auto my-8 px-4 max-w-4xl"
/>

In your component's .html file, add the following div where you want the widget to appear:

<div class="feedspace-embed" data-id="3c433f94-380a-439b-bd91-93d44e867674"></div>

In your component's TypeScript file, add the following code to load the Feedspace widget:

import { AfterViewInit, Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
})
export class YourComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    this.loadFeedspaceWidget();
  }

  loadFeedspaceWidget(): void {
    if (document.querySelector('script[src*="embed.min.js"]')) {
      (window as any)?.initFeedspaceEmbed?.();
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://js.feedspace.io/v1/embed/embed.min.js';
    script.async = true;
    document.body.appendChild(script);
  }
}

Install our Framer Plugin

STEP 1

STEP 2

STEP 3

STEP 4

STEP 5

STEP 1

STEP 2

STEP 3

STEP 1

STEP 2