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
Hannes

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.

  [
    'storyblok-nuxt',
    {
      accessToken: StoryBlokToken,
      cacheProvider: 'memory',
      customParent: 'https://127.0.0.1:8080'
    }
  ],

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.