Tenants

It’s possible to enable a child iFrame to talk to SketchUp.

You should ensure that your application is configured with the correct Content Security Policy and performs appropriate post message origin checks.

let container = document.body;
let iframeHost = document.createElement('div');
iframeHost.style.position = 'fixed';
iframeHost.style.top = '0';
iframeHost.style.left = '50vw';
iframeHost.style.width = '50%';
iframeHost.style.height = '50%';
iframeHost.style.background = 'white';
iframeHost.style.zIndex = 1000; // make it visible in Sketchup Web
iframeHost.innerHTML = `<iframe id="tenant-iframe" src="https://docs.sketchup.com/docs/sketchup/playground.html" style="width:100%;height:100%"></iframe>`;
container.append(iframeHost);

let frame = document.getElementById('tenant-iframe');
SketchUpApi.registerTenantIFrame({
    target: () => frame,
    // ensure that messages we send to the iFrame target the expected origin
    targetOrigin: 'https://docs.sketchup.com',
    // ensure that we validate the origin of messages coming from the iFrame
    originPredicate: (origin) => origin === 'https://docs.sketchup.com',
    // optionally including an onClose handler
    onClose: () => {
        // Removing the frame to replicate the default behavior.
        frame.remove();
        alert('iFrame closed');
    }
});