Embed Browser Live UI

​

Obtaining the Live View URL

Anchor Browser offers a live view feature that allows you to embed an interactive frame of a website as a web element.

​

Headful (Recommended)

Headful mode provides a single URL to view the full chrome view, including the address bar. This also ensurese the presented tab is always the active tab.

Browsers are headful by default.

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>

​

Disable browser interactivity

To prevent the end user from interacting with the browser embedding, use the "read_only": true" when creating a session.

{
  "session": {
    "live_view": {
      "read_only": true
    }
  }
}

​

Headless

To create a browser in headless mode, set the headless parameter to {"active": false} when creating a session.

{
  "browser": 
  {
    "headless": {
      "active": false
    }
  }
}

To obtain the browser live session URL, start by creating a session

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>

​

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={{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 ... style="... pointer-events: none;"></iframe>