White Label Storyblok on New Server

Hey team I have a question about white labeling. Right now I have the Storyblok application running on my own Netlify server. Everything works as expected, except for click events in the editor I-frame. Hover seems to work, and all editable blocks are receiving the grey dashed border styling, however nothing happens when I click on a component.

Using the same space on the actual storyblok app/server everything works as expected.

I’d really like to be able to white label it however… any thoughts as to why this might be happening?

link for your reference to see what is happening… https://priceless-kepler-32b7e7.netlify.com/

Hello Adam,
nice to have you here!

You need to add customParent: ‘ https://priceless-kepler-32b7e7.netlify.com/’ to the .init function of the Storyblok bridge.
After that the preview should work as expected.

With best regards

Thanks for the response Hannes.

I’m curious as to how I can do this, because my site uses nuxt js and I’m using the storyblok nuxt npm package and set up in my nuxt.config.js file.

How would I customize this parent URL given this type of configuration?

Hi Adam,

I just tried NuxtJS setup with whitelabling Storyblok. It looks like we have there little bug and the expecting nuxt module configuration doesn’t work.

      accessToken: StoryBlokToken,
      cacheProvider: 'memory',
      customParent: ''

But our dev team is looking on the problem, so we will get back to you soon.

Thanks for reporting this. :wink:

@Samuel Can you add that configuration option in the nuxt module please?

Hey Samuel, I see this is sitting in the repo as a pull request ready to go which is awesome!

Any chance this could get merged sooner then later? About to get a client up and running…

I am now getting this error in the console when attempting to edit my site…

storyblok-latest.js:1 Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://app.storyblok.com’) does not match the recipient window’s origin.

Hm. I will have to test it in my repo. I will get you answer asap.

@amp is this still an issue? If I remember correctly, this was solved in other channels. Am I correct?

Hey Samuel,

This issue was resolved but uncovered another issue.

I haven’t checked again lately as this caused me to have to go another route for my client unfortunately and not use storyblok :frowning:

Basically wasn’t able to white label the editor on my URL and edit a space. Was getting an post error in the console…

Certainly would love to see it resolved though!

Anything special connect to your environment/setup or do you think it was on our side?

It’s on your end in storyblok-latest.js.

This is the error message I get in the console.

storyblok-latest.js:1 Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://app.storyblok.com’) does not match the recipient window’s origin (‘https://editor.diginomaly.com’).

It looks like a security feature of the browser that only allows messages to be sent between an expected origin. So because the editor is loaded on my url the messages are being blocked.