Instagram feed is very slow to load

[James_Davidson1 (James Davidson)]

• Issue description: if feed is very slow on my framer website

• Link to the page with the widget in question: poppyfielding.com

[Max]

Hey there and welcome to the Community, @James_Davidson1

The issue occurs because the widget is placed in an iframe. To fix it, the widget should be reinstalled avoiding iframes.

For this, please remove your current installation code, create a Code element on the Assets tab and paste the code below there:

import { useEffect } from "react"
import { addPropertyControls, ControlType } from "framer"

export default function ElfsightWidget(props) {
    const { widgetId } = props

    useEffect(() => {
        const platform = document.createElement("script")
        platform.src = "https://static.elfsight.com/platform/platform.js"
        platform.setAttribute("data-use-service-core", "")
        platform.setAttribute("defer", "")
        document.body.append(platform)

        return () => {
            platform.remove()
        }
    }, [])

    return (
        <div>
            <div className={widgetId} />
        </div>
    )
}

addPropertyControls(ElfsightWidget, {
    widgetId: { type: ControlType.String, title: "7dfef056-e54e-4e3a-893f-474b92868b5f" },
})

Try it out and let me know if it helped

[James_Davidson1 (James Davidson)]

Hi, it’s for this embed:

Can you share the correct code for this?

[Max]

Yep, I see this!

The code I’ve shared above should work fine if you add it to the Code section on the Assets tab. Have you already tried doing this?

[James_Davidson1 (James Davidson)]

Yes, the asset is in but it asks me to add further info:

[Max]

Sorry for the confusion!

Please try to use this code instead of the previous one:

import { useEffect } from "react"
import { addPropertyControls, ControlType } from "framer"

export default function ElfsightWidget(props) {
    const { widgetId } = props

    useEffect(() => {
        const platform = document.createElement("script")
        platform.src = "https://static.elfsight.com/platform/platform.js"
        platform.setAttribute("data-use-service-core", "")
        platform.setAttribute("defer", "")
        document.body.append(platform)

        return () => {
            platform.remove()
        }
    }, [])

    return (
        <div>
            <div className={widgetId} />
        </div>
    )
}

addPropertyControls(ElfsightWidget, {
    widgetId: { type: ControlType.String, title: "Widget ID" },
})

Once this done, please move the resulted code component using the Drag and Drop option to your page and paste your widget ID (7dfef056-e54e-4e3a-893f-474b92868b5f) to the 2nd field (its title will be Widget ID)

Here is a video screencast showing how to achieve this:

Give it a try and let me know if it worked

[James_Davidson1 (James Davidson)]

Thanks for this, I’ve done that and its all in place, but still nothing shows.

Can you test with my widget ID? 7dfef056-e54e-4e3a-893f-474b92868b5f

[Max]

One more thing to check: Have you saved the file after adding the code snippet? You can do this by pressing Ctrl+S.

If the file is saved but the widget still doesn’t appear, we’ll need temporary access to your website’s backend. Please send me the following details in a direct message:

• Login link
• Temporary login and password

To send me a message, click on my profile picture and select “Message.”