Hide board header in iframe (+ SSO)#173

We’d like to be able to display the widget inside our app, but on it’s own page.

We’re currently doing this, by “iframing” the Nolt Website inside our app.

It would be great if we could use the widget, and load the widget programmatically. Rather than having to have a button that the user clicks to load the Nolt Widget.

I.e.

nolt.show({ displayAccountButton: false});

displayAccountButton option would allow us to remove the account button in the top right.

Hi Marvin! Am I understanding correctly that you’d like to embed your Nolt board “inline” within a page? In that case, you could try the following snippet:

<iframe
  src="https://your-board.nolt.io/widget?withHeader=true"
  frameborder="0"
  height="600"
  width="100%"
></iframe>

By setting “withHeader=false” you can hide the board header if you want. It’s an undocumented workaround as we do not support inline embedding officially yet because of some usability issues (e.g., scrolling). Let me know if that helps!

Sort of, but the UI for iframing the whole site is nicer (i.e scrollbars issue). Then we have an absolutely position element covering up the header, down to the menu bar.

Ideally, I want be able to embed this, and only this (see screenshot).

And the cherry on top would be for URL to update as you change from Home to Roadmap, to specific suggestions.

Sort of, but the UI for iframing the whole site is nicer (i.e scrollbars issue). Then we have an absolutely position element covering up the header, down to the menu bar.

Could you elaborate on that?

Ideally, I want be able to embed this, and only this (see screenshot).

That should be possible with the following URL: https://feedback.nolt.io/widget?withHeader=false

Using the main Nolt board this works great - i.e an iframe with https://feedback.nolt.io/widget?withHeader=false as the source.

But if the src is set via the SSO, whereby the source URL looks like this;

$"{NoltBoardUrl}/sso/{token}?returnUrl={NoltBoardUrl}/widget?withHeader=false"

The withHeader=false is ignored, and the header displays - hence trying to cover it up with an absolutely position element.

Thanks for the explanation, Marvin. Your URL looks good to me. I’ve been able to log in a user via SSO and disable the header with the following iframe src:

<iframe
  src="https://YOUR_BOARD.nolt.io/sso/JWT_FOR_THIS_USER?returnUrl=https://YOUR_BOARD.nolt.io/widget?withHeader=false"
  frameborder="0"
  height="600"
  width="100%"
></iframe>

Does it also work for you when you hard-code the URL?

Thanks @Daniel Stefanovic - I had typo in my previous URL - which meant the URL looked like this;

$"{NoltBoardUrl}?withHeader=false/sso/{token}?returnUrl={NoltBoardUrl}/widget?withHeader=false"

When it should have been this;

$"{NoltBoardUrl}/sso/{token}?returnUrl={NoltBoardUrl}/widget?withHeader=false"

It’s now working perfectly. Cheers.

Thank you for your feedback, Marvin. Happy to hear that it works now!

Ассалому алайкум, ижодингизга омад ёр бӯлсин.