​
Overview

Anchor Browser offers a live view feature that allows you to embed an interactive frame of a website as a web element. The live_view_url is received when creating a session with headless: false (which is the default mode).

​
Headful Mode (Default)

Headful mode provides a single URL to view the full chrome view, including the address bar. This ensures the presented tab is always the active tab and provides the best user experience. Browser Live View in Headful Mode To create a browser in headful mode, set the headless parameter to false when creating a session: 
const axios = require('axios');
const ANCHOR_API_KEY = process.env.ANCHOR_API_KEY;

(async () => {
const response = await axios.post("https://api.anchorbrowser.io/v1/sessions", {
    browser: {
        headless: {
            active: false
        }
    }
  }, {
    headers: {
      "anchor-api-key": ANCHOR_API_KEY,
      "Content-Type": "application/json",
    },
  });
  
  const session = response.data.data;
  const liveViewUrl = session.live_view_url;
})().catch(console.error);
Then, use the live_view_url from the response to embed the live view directly into an iframe: 
<iframe 
  src="{{live_view_url}}" 
  sandbox="allow-same-origin allow-scripts" 
  allow="clipboard-read; clipboard-write" 
  style="border: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
</iframe>

​
Advanced Embedding Configuration

​
Embed in Fullscreen View (Hide Navigation Bar)

To use the fullscreen view, replace the live view URL with the following: 
<iframe src="https://anchorforge.io/devtools-frontend/inspector-fullscreen.html?wss={{session_url}}" ...></iframe>

​
Disable Browser Interactivity

To prevent the end user from interacting with the browser, add the style="pointer-events: none;" attribute to the iframe: 
<iframe 
  src="{{live_view_url}}" 
  sandbox="allow-same-origin allow-scripts" 
  allow="clipboard-read; clipboard-write" 
  style="border: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; pointer-events: none;">
</iframe>
This feature is available for both headful and headless modes. In headless mode, you would use the session_url instead of live_view_url.

​
Headless Mode (Legacy)