> For the complete documentation index, see [llms.txt](https://doc.vn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.vn.com/introduction/vn-bot-developers-guide.md).

# VN Bot Developer's Guide

### 1. Register and log in (using MetaMask)

#### Step 1: Install MetaMask

* Download and install MetaMask wallet on either your PC or mobile.
* Create a new wallet account or import an existing wallet.

<div align="left"><figure><img src="/files/esT5qGgUWNwl1KRWz0S7" alt="" width="358"><figcaption></figcaption></figure></div>

Step 2: Log in to the VN Bot Developer Platform

* Visit the [VN Bot Developer Platform](https://vn.com/).
* Click the "Login" button and select "MetaMask Wallet" to log in.
* Complete wallet signature confirmation and login.

<div align="left"><figure><img src="/files/fXU2rzB5ilS74aF5nXT9" alt="" width="375"><figcaption></figcaption></figure></div>

2\. Register as a VN Bot developer user

#### Step 1: Enter the registration page

* After logging in, it will automatically redirect to the registration page.
* Fill in the relevant developer information and submit.

<div align="left"><figure><img src="/files/IEXkxxJ7Gtd9Y0sfuAu1" alt="" width="334"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/gb6Wo85p5685qZ8qIVgF" alt="" width="375"><figcaption></figcaption></figure></div>

#### Step 2: Fill in developer information

* Fill in necessary information such as wallet address, developer name, contact information, etc.

<div align="left"><figure><img src="/files/NIy3l6TtvcREUeczCeYr" alt="" width="375"><figcaption></figcaption></figure></div>

#### Step 3: Complete registration

* Click the "Register" button to complete the developer account registration.

### 3. Upload your Bot program

#### Step 1: Create a new Bot project

* Click the "Create New Bot" button and fill in the Bot name and description.
* Select the Bot type (e.g. NFT, GAME\_FI, etc.).

<div align="left"><figure><img src="/files/9tIJyTTF7q7xu3USnI4j" alt="" width="375"><figcaption></figcaption></figure></div>

#### Step 2: Upload the Bot program file

* Upload local program files directly.

#### Step 3: Submit for review

* Click 'Submit for Review' and wait for the platform to approve.

### 4. Manage your Bot program

* View and manage all the bot programs you upload in the developer backend.
* Support operations such as updating, deleting, and version management.

### 5. VN JSBridge API Specification

* #### 5.1 - Init JSBridge <a href="#id-1-init-jsbridge" id="id-1-init-jsbridge"></a>

  ```
  // Implement callback handlers
  const registerCallbackHandlers = [
    {
      id: VNEventName.Token,
      func: function(token: string) {
        showMessage("token: " + token);
      }
    },
    {
      id: VNEventName.UserInfo,
      func: function(info: { token: string }) {
        showMessage("info: " + info.token);
      }
    }
  ];
  // init VNJSBridge
  const bridge = new VNJSBridge(registerCallbackHandlers);
  // send get token event action
  bridge.callGetToken();
  // send get user info event action
  bridge.callGeUserInfo();
  ```

  #### 5.2 - Enum <a href="#id-2-enum" id="id-2-enum"></a>

  **VNEventName**

  * Token: Get `token` event id
  * UserInfo：get vn `user info` event id

  #### 5.3 - Constant <a href="#id-3-constant" id="id-3-constant"></a>

  **VN\_FLUTTER\_CHANNEL**

  The key of Javascript Channel, Flutter will auto register before page loaded.

  **VN\_JS\_BRIDGE**

  The key of callback handlers collection, provided by web application to receive `event` data.

  **VN\_JS\_BRIDGE\_TOKEN\_FUNC**

  The handler of get `token` evnet, should register by user when initialize VNJSBridge.

  **VN\_JS\_BRIDGE\_USERINFO\_FUNC**

  The handler of get `user info` evnet, should register by user when initialize VNJSBridge.

  #### 5.4 - NPM Packag <a href="#id-4-npm" id="id-4-npm"></a>

  <https://www.npmjs.com/package/vn-jsbridge-sdk>

### 6. Frequently Asked Questions (FAQ)

* How can I verify if my developer account has been successfully registered?\
  **Ans-**  After logging in, you can view the "My Account" page.
* What languages or frameworks can I upload bot programs for?\
  **Ans-**  Supports multiple programming languages and frameworks, such as Node.js, Python, etc.
* How can I check the running status of my bot?\
  **Ans-**  View statistics, log information, and user feedback in the developer backend.

### 7. Platform support and community

* Developer Community: Join the developer community and discuss technical issues.
* Technical support email: <support@vn.com> .