​
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.

​
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, simply create a session: 
import  AnchorBrowser from 'anchorbrowser';

// Initialize the client
const client = new AnchorBrowser({ apiKey: process.env.ANCHOR_API_KEY });

// For explicit headfull session configuration (optional, default to false)
const config = {
  browser: {
    headless: {
      active: false
    }
  }
};

const session = await client.sessions.create(config);
const liveViewUrl = session.data.live_view_url;
console.log(`Live view URL: ${liveViewUrl}`);
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="{{live_view_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.

​
Headless Mode

To obtain the browser live session URL in headless mode, start by creating a session: 
import  AnchorBrowser from 'anchorbrowser';

// Initialize the client
const client = new AnchorBrowser({ apiKey: process.env.ANCHOR_API_KEY });

const config = {
  browser: {
    headless: {
      active: true
    }
  }
};

const session = await client.sessions.create(config);
const liveViewUrl = session.data.live_view_url;
console.log(`Live view URL: ${liveViewUrl}`);
The live_view_url currently points to the browser default first page.
Then, use the create-session response to embed the live view URL 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>