​
Obtaining the Session URL

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

To obtain the browser live session URL, start by creating a session, which will return the following object:

{
  "page_id": "<string>",
  "id": "<string>",
  "session_url" :"connect.anchorbrowser.io/devtools/page/{{page-id}}?sessionId={{session-id}}"
}
The session_url points to the browser default first page. If your browser proccess involves creating a new page, collect the corresponding URL by using the live view URLs endpoint.

​
Embedding the Live View

Embed the following iframe to get a live view of the browser session.

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

​
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}}" 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, add the style="pointer-events: none;" attribute to the iframe:

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

​
Embed browser with multiple tabs

To embed the browser with multiple tabs, use the live view URLs API to obtain the metadata about the open tabs:

[
      {
        "frontend_url": "https://anchorforge.io/devtools-frontend/inspector.html?wss=<session_url>",
        "id": "4471AF05DB5CB530971145A14848E5A7",
        "title": "Documentation - Anchor Browser Docs",
        "url": "https://docs.anchorbrowser.io/introduction"
      },
      {
        "frontend_url": "https://anchorforge.io/devtools-frontend/inspector.html?wss=<session_url>",
        "id": "4471AF05DB5CB530971145A14848E5A7",
        "title": "API Reference - Anchor Browser Docs",
        "url": "https://docs.anchorbrowser.io/api-reference"
      }
]

Below is an example of how to dynamically embed multiple tabs with a tab selector:

File DownloadBrowser-use