> For the complete documentation index, see [llms.txt](https://tokenscript.gitbook.io/token-negotiator/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tokenscript.gitbook.io/token-negotiator/learn/active-negotiation-ui/custom-views.md).

# Custom Views

The Token Negotiator utilises 3 views:

`start` - initial view to show to an end user. For use as a welcome page giving context and instruction to the end user. After first connection, this screen is no longer shown.

`wallet` - To connect a users Web3 Wallet (not required for off chain tokens).

`main` -  For the main application.

With `viewOverrides` you can override these default views and extend the application with new. 

```
viewOverrides?: {
    view: string: {
        component: ViewComponent
        options?: { [key: string]: any }
    }
}
```

Example Usage:

```
  import {AbstractView} from "./view-interface";
  
  class MyCustomView extends AbstractView {
  	constructor(client: Client, popup: Ui, viewContainer: HTMLElement, params: any, private someOtherObjectINeed: any) {
  		super(client, popup, viewContainer, params);
  	}
        init() {
          // view initialised
        }
        update() {
          // optional method
        }
   	render(){
          this.viewContainer.innerHTML = "<div>hello world</div>"
        }
  }


  const negotiator = new Client({
    type: "active",
    issuers: [
      {
        blockchain: "evm",
        onChain: true,
        collectionID: "expansion-punks",
        contract: "0x0d0167a823c6619d430b1a96ad85b888bcf97c37",
        chain: "eth",
      }
    ],
    uiOptions: {
      uiType: "inline",
      openingHeading: "Connect your NFT to access custom content and more.",
      issuerHeading: "Your Off Chain Attestations",
      repeatAction: "try again",
      theme: "light",
      position: "bottom-right",
      alwaysShowStartScreen: false,
      viewOverrides: {
        "start": {
          component: MyCustomView,
          options: {
            myCustomOption: "My custom text",
            viewTransition: "slide-in-bottom"
          }
        }
      }
    },
  });
          
```

For custom requirements that don't require Token Negotiators default view functionality, set `alwaysShowStartScreen` as `true` via `uiOptions` which will de-activate automatic page navigation.&#x20;

For Typescript users here is an example with types applied (for versions 3.2.0 and above).&#x20;

```
import { Client, AbstractView, Ui } from "@tokenscript/token-negotiator";

export class CustomMainView extends AbstractView {

  client!: Client;
  ui!: Ui;
  viewContainer!: HTMLElement
  params: any

  constructor(client: any, popup: any, viewContainer: any, params: any) {
    super(client, popup, viewContainer, params);
  }

  init() {
    // view initialization
  }

  render() {
    // render view updates
  }

  update() { 
    // optional interface method to manage view updates
  }
}
```

For support and any questions please reach out to us on [discord](https://discord.com/invite/CfvmYFyujW) or via <sayhi@smarttokenlabs.com>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://tokenscript.gitbook.io/token-negotiator/learn/active-negotiation-ui/custom-views.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.