Embedded Browser Live UI

​

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.

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>

​

Headless Mode (Legacy)

Show Headless Mode (Deprecated)

Headless mode is being deprecated and will be removed in a future version. We recommend using headful mode for all new implementations.

To obtain the browser live session URL in headless mode, start by creating a session with headless: true:

The session_url points to the browser default first page. If your browser process involves creating a new page, collect the corresponding URL by using the live view URLs endpoint.

Then, use the create-session response to embed the live view URL directly into an iframe:

Copy

<iframe src="https://anchorforge.io/devtools-frontend/inspector.html?wss={{session_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>