Skip to content
Documentation

    Using Hub with Framer

    With Hub and Framer, you can seamlessly embed a widget or announcement page into your website. This allows you to display news on your main domain and retain the standard layout with your website’s header and footer.

    Adding the embed code

    Section titled “Adding the embed code”

    Copy the following code snippet into the <head> element of your page.

    1. Click on the ⚙️ icon in the top right of the header in Framer.
    2. Click on General.
    3. Scroll down to the Custom Code section.
    4. Insert the following code in the End of <head> tag panel.
    <script src="https://embed.released.so/1/embed.js"></script>

    Alternatively, you have the option to include the code in the section of the specific page where you wish to display the announcement page. However, considering that you may want to incorporate a notification badge in other sections of the website as well, it is advisable to follow the instructions mentioned above and add it in the General section

    Creating a component

    Section titled “Creating a component”
    1. To create a new code component go to Assets → Code and click the plus button.
    2. Delete the Framer example code and copy and paste the following code into the editor:
    // We need to define an interface for our release page custom html component.
    declare global {
        namespace JSX {
            interface IntrinsicElements {
                // The name of the custom component and the available attributes
                "released-page": {
                    "channel-id": string
                    "color-scheme"?: string
                    "color-primary"?: string
                    "header"?: string
                    "top-offset"?: string
                }
            }
        }
    }
    

    // This is the output of our custom component that will be rendered in the page.
    export default function Released_page(props) {
        return (
            <>
                <released-page
                    channel-id="f124d37b-cb6f-4d4d-89ef-8116a683bc10"
                    header="false"
                    color-scheme="dark"
                    top-offset="59"
                ></released-page>
            </>
        )
    }
    1. Customize the properties of the <released-page>tag at the bottom with your preferred values. For further details on the available options, refer to the announcement-page.md documentation.

    You can now use your component like other HTML components in Framer. Drag it onto the page where you want to display the announcements.