Skip to main content

Hi,

Trying to create a miro board for unregistered users (anonymous board), once the board is created the board picker returns with a accessToken which we can use to share the board with to other users . I am trying to embed the miro board in ReactNative with an iframe using WebView, even though the link has accessToken , the board always shows up as a private board for another user with the link.

The code : 
 

 <WebView
            originWhitelist={="*"]}
            scalesPageToFit={false}
            scrollEnabled={false}
            ref={this.miroWhiteboardRef}
            style={{
              flex: 1,
            }}
            source={{
              // uri: whiteboard?.accessLink,
              html: `<iframe title="miro-whiteboard" referrerpolicy="no-referrer-when-downgrade" allow="fullscreen; clipboard-read; clipboard-write" src=${`https://miro.com/app/live-embed/${whiteboard?.accessLink}`} style="background: transparent; border: 1px solid rgb(204, 204, 204); transform: scale(calc(0.8)); transform-origin: 0 0; width: calc(100% * 1.85); height: calc(100% * 1.85); zoom: 0.25;"></iframe`,
            }}
            javaScriptEnabled={true}
            domStorageEnabled={true}
          />

The Access Link in question : https://miro.com/app/live-embed/uXjVMZx6tNU=/?boardAccessToken=Aeq38Juf4lF4eR44oqTFWReKjqQvq5MH&autoplay=true

While the same link works with our whitelisted domain (whitelisted via app settings in our miro account) . It is not working with react native on embedding the link , it always says that its a private board.


What i have already tried :
Instead of using the access , tried to embed using the directLink i.e : https://miro.com/app/live-embed/uXjVMZx6tNU=/ , the result is the board that says that it is private board. 

Any help with this is appreciated
Thanks

Hi @thedarkstrix, does the same happen if you use the integration in the browser (not react native)?

@Josip Janzic works fine with normal browsers (web apps).

Note : When the following link is hit by a client (https://miro.com/app/live-embed/uXjVMZx6tNU=/?boardAccessToken=Aeq38Juf4lF4eR44oqTFWReKjqQvq5MH&autoplay=true) is miro checking for the origin of the domain ? When this is on a mobile device , not exactly sure of what that origin domain will be. Also any insights on how the board is to be embedded using iframe using webView (as we are using react native) perhaps some info from miro mobile app or whereby mobile app.  Whereby would be useful as i think they are using live-embed on mobile as well.

Thanks for providing the details, I will need some time to investigate how to make this integration work on mobile.

@thedarkstrix For this scenario partners usually wrap our miro.com/app/live-embed iframe with their own iframe, which provides needed referer information for domain whitelist. Could you try doing that?

@Josip Janzic That seem to does the trick , works fine now. Thank you for the support

Reply


Terms & Conditions