Embed element with dynamic state.url

Visual Editor Help
1

I have a dynamic url for a miro.com board that I want to embed in a builder.io cms page, where the url rendering for some reason does not work. If I hardcode the url in the custom code block/ embed block it works fine. I even can see the url via the content state tab in preview mode. But as soon as I try it on my live server the url property is not rendered and I only see an empty custom code block/ embed block on my page via code inspector. What is going on?

2

Hello, @Florian!

Could you please share the link to the builder content or live page where we can reproduce and investigate this issue?

3

Hi @manish-sharma! Thanks for getting back to me so quickly. Here is the link: Builder.io: Visual Development Platform

4

Hello @Florian,

Considering the issue only happens on the live page, are you getting any errors in the console? There could be an issue with CORS or restrictions with rendering miro.com.

5

No, CORS or restrictions by Miro are not the issue.

6

@manish-sharma : I have found the problem: the state.miro_url value gets mixed up with my sites domain like this: Create Next App. How to prevent this?

7

Hello @Florian!

To ensure that your state.miro_url doesn’t get mixed up with your site’s domain, you’ll need to ensure that the URL is correctly formatted and not concatenated incorrectly.

You can use custom JS code or try something like the below

const miroUrl = state.miro_url; 
const validURL = new URL(miroUrl);
8

Thanks @manish-sharma ! The strange thing is, that the url gets mangled up somewhere in builder.io cms. My nextjs code

 
       <BuilderComponent
            model='page'
            context={{
                handleWebSocket: handleWebSocket,
                handleAudioContext: handleAudioContext,
                startSession: startUserSession,
            }}
            data={{
                miro_url: miro_url.current
            }}
        />
    );

console.logs this: “Miro”

Only after adding state.miro_url to a custom code block as href the link misses the first forward slash: “https:/miro.com/app/live-embed/uXjVKrKSvos=”

9

Hello @Florian,

Does passing the URL. as string works?

    <BuilderComponent
      model='page'
      context={{
          handleWebSocket,
          handleAudioContext,
          startSession: startUserSession,
      }}
      data={{
          miro_url: miro_url.current.toString()
      }}
    />

Additionally, you can try using state.miro_url.toString() in the editor when binding.

10

Hello @manish-sharma

mirl_url seems to be a string already, but maybe this causes problems?

handleSSEMessages = (event) => {
        if (typeof window !== 'undefined') {
            const newData = JSON.parse(event.data);

            Object.entries(newData).forEach(([key, value]) => {
                switch (key) {
                    case 'board_id':
                        this.miro_url = value;
                        console.log('this.miro_url: ', this.miro_url);
                        localStorage.setItem('miro_url', JSON.stringify(this.miro_url));

When I get miro_url in a box inside of a symbol with custom data { data: {state.miro_url}} I get the url exactly like this: “Miro”

Maybe this here helps, too: Builder.io: Visual Development Platform

11

Hi @manish-sharma,

I finally got it to work. I need to delay the rendering of the iframe for it to work, as the state object was not available on page load.

Thanks again!

1 Like