# ISCN-AR Widget Reference

{% hint style="warning" %}
The documentation is designed for Liker Land and LikeCoin v2. For information on [3ook.com](https://3ook.com/) and LikeCoin v3, please visit [docs.3ook.com](https://docs.3ook.com) and [dao.like.co](https://dao.like.co/).
{% endhint %}

Base URL

Testnet: [`https://testnet.like.co/in/widget/iscn-ar`](https://testnet.like.co/in/widget/iscn-ar)

Production: [`https://like.co/in/widget/iscn-ar`](https://like.co/in/widget/iscn-ar)

Since `postMessage()` would be needed for operating this widget, caller is expected to use `window.open` on the above urls.

### &#x20;Input Params <a href="#input-params" id="input-params"></a>

| language      | Force UI display locale, options are `zh`, `cn`, `en`                                                                                                    |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| redirect\_uri | Act as a whitelist host for postMessage, actual redirect is not implemented, please use with `opener` below                                              |
| opener        | default 0. If set, would fire a `postMessage` back to `window.opener` with `redirect_uri` host as target, then close current window                      |
| mint          | set to `1` to skip the success window after ISCN registration and skip to Writing NFT minting screen directly                                            |
| iscn\_id      | (optional) For updating existing ISCN record, the encoded ISCN ID for update. Note that the record would be completely overwritten with the new metadata |

Query strings are also passed into [NFT Portal](/developer/likenft/nft-portal.md) if user choose to mint NFT after ISCN is registered. Please refer to [NFT Portal Reference](/developer/likenft/nft-portal/nft-portal-reference.md) for the supported query string.

### PostMessage input format

#### Mark widget as ready

Send this action to switch widget to ready to accept mode.

```javascript
{ action: 'INIT_WIDGET' }
```

<table><thead><tr><th>Key</th><th>Value</th><th data-hidden></th></tr></thead><tbody><tr><td>action</td><td>INIT_WIDGET</td><td></td></tr></tbody></table>

#### Send ISCN Data

Submit ISCN data to widget

```javascript
{
    action: 'SUBMIT_ISCN_DATA',
    data: {
      files: [
        {
          filename: 'index.html',
          mimeType: 'text/html',
          data: 'PCFET0NUWVBFIGh0bWw+PGh0bWw+Ci...',
        },
        {
          filename: 'wp-content/uploads/image.png',
          mimeType: 'image/png',
          data: 'iVBORw0KGgoAAAANSUhEUgAABAAAAA...',
        },
      ],
      metadata: {
        name: 'LikeCoin Update &#124; Launching $LIKE Airdrop and Civic Likers Web3',
        tags: ['Airdrop', 'Civic Liker', 'Depub', 'LikeCoin', 'Progress Update'],
        author: 'likecoin',
        description: 'Launch of LikeCoin Airdrop The long-awaited 50 million...',
      }
    },
  }
```

| Key           | Description                                                                                                                                     |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| action        | SUBMIT\_ISCN\_DATA                                                                                                                              |
| data          | ISCN Data for submission                                                                                                                        |
| data.files    | Array of files to be uploaded to Arweave, must contain an `index.html` if more than one file. Please refer to the tables below for file formats |
| data.metadata | ISCN metadata. Please refer to the tables below for metadata formats                                                                            |

Supported field for ISCN metadata

<table><thead><tr><th>Metadata keys</th><th width="158.21971252566738">Required<select><option value="e2e551201b4049b78d7fe54be0ed92dc" label="Required" color="blue"></option><option value="9a2ebddbbdd34f7ca6bcdf897862be6f" label="Recommended" color="blue"></option><option value="3b551d7246154f7aadd1175a3b6280aa" label="Optional" color="blue"></option></select></th><th>Description</th><th>Sample</th></tr></thead><tbody><tr><td>name</td><td><span data-option="e2e551201b4049b78d7fe54be0ed92dc">Required</span></td><td>Name for the ISCN content</td><td>"Computing recursive function with matrix multiplication"</td></tr><tr><td>description</td><td><span data-option="9a2ebddbbdd34f7ca6bcdf897862be6f">Recommended</span></td><td>Description for the ISCN content</td><td>"An article on computing recursive function with matrix multiplication."</td></tr><tr><td>tags</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>Tags for the ISCN content</td><td>["matrix", "recursion"]</td></tr><tr><td>author</td><td><span data-option="9a2ebddbbdd34f7ca6bcdf897862be6f">Recommended</span></td><td>Name of the author</td><td>"Chung Wu"</td></tr><tr><td>authorDescription</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>Description of the author</td><td>"Developer"</td></tr><tr><td>url</td><td><span data-option="9a2ebddbbdd34f7ca6bcdf897862be6f">Recommended</span></td><td>URL of the content</td><td>​"<a href="https://nnkken.github.io/post/recursive-relation/&#x22;,">https://nnkken.github.io/post/recursive-relation/"</a></td></tr><tr><td>stakeholders</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>Stakeholder list as defined in ISCN specification. If <code>author</code> or <code>publisher</code> is defined, they will be automatically appended into <code>stakeholders</code> by the widget</td><td>{ "rewardProportion": 5, "contributionType": "http://schema.org/citation", "footprint": "https://en.wikipedia.org/wiki/Fibonacci_number", "description": "The blog post referred the matrix form of computing Fibonacci numbers." }</td></tr><tr><td>fingerprints</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>Fingerprint of the content, e.g. SHA hash, IPFS hash and Arweave ID. If <code>files</code> are defined, resulting Arweave ID and IPFS hash will be automatically appended into <code>fingerprints</code></td><td>["hash://sha256/9564b85669d5e96ac969dd0161b8475bbced9e5999c6ec598da718a3045d6f2e"]</td></tr><tr><td>publisher</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>One of <code>matters</code>, <code>depub</code> , an arbitrary string representing ID of a publisher, or a <code>stakeholder</code> object . Publisher object allow platforms to add itself into <code>stakeholders</code> and define <code>rewardProportion</code></td><td>{"entity":{"description":"Matters is a decentralized, cryptocurrency driven content creation and discussion platform.","@id":"https://matters.news/","name":"Matters"},"rewardProportion":0}</td></tr><tr><td>license</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>URL of the license of the ISCN content</td><td>"<a href="https://creativecommons.org/licenses/by-sa/4.0/">https://creativecommons.org/licenses/by-sa/4.0/</a>"</td></tr><tr><td>recordNotes</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>Arbitrary string that will be recorded in ISCN as note</td><td>"This record is created by ISCN widget"</td></tr><tr><td>memo</td><td><span data-option="3b551d7246154f7aadd1175a3b6280aa">Optional</span></td><td>Arbitrary string that will be recorded in the create ISCN Transaction as memo</td><td>"This tx is sent by ISCN widget"</td></tr></tbody></table>

Required fields for `data.files`:

| File Keys | Description                                                               |
| --------- | ------------------------------------------------------------------------- |
| filename  | Name of the file, can be a full path containing directory                 |
| mimetype  | mime type of the file, needed for proper display in IPFS/Arweave gateways |
| data      | Base64 encoded file data                                                  |

File `data` should be encoded in base64, with proper `mimeType` defined. `filename` can either be the actual filename, or include a directory path as prefix.

If multiple files are to be uploaded, an `index.html` must be included which would be shown as the default page when the files are accessed through Arweave or IPFS.

### Emit event format

#### ISCN\_WIDGET\_READY

Fired when widget is ready to receive message

```
{ 
  action: 'ISCN_WIDGET_READY',
}
```

#### ARWEAVE\_SUBMITTED

Fired when files are uploaded to Arweave and IPFS

```
{ 
  action: 'ARWEAVE_SUBMITTED',
  data: {
    ipfsHash,
    arweaveId,
  }
}
```

#### ISCN\_SUBMITTED

Fired when content is submitted to ISCN

```javascript
{ 
  action: 'ISCN_SUBMITTED',
  data: {
    tx_hash,
    iscnId,
  }
}
```

### Example Code <a href="#example-link" id="example-link"></a>

```javascript
const w = window.open('https://like.co/in/widget/iscn-ar?opener=1&redirect_uri=https%3A%2F%2Flike.community');

const ISCN_WIDGET_ORIGIN = 'https://like.co';

function onPostMessage(event) {
  if (event.origin !== ISCN_WIDGET_ORIGIN) {
    return;
  }
  try {
    const { action, data } = JSON.parse(event.data);
    if (action === 'ISCN_WIDGET_READY') {
      w.postMessage(JSON.stringify({ action: 'INIT_WIDGET' }), ISCN_WIDGET_ORIGIN);
      sendISCNPayload();
    } else if (action === 'ARWEAVE_SUBMITTED') {
      const {
        ipfsHash, arweaveId,
      } = data;
      console.log(ipfsHash, arweaveId);
    } else if (action === 'ISCN_SUBMITTED') {
      const {
        tx_hash: txHash, iscnId,
      } = data;
      console.log(txHash, iscnId);
    } else {
      console.log(`Unknown event: ${action}`);
    }
  } catch (err) {
    console.error(err);
  }
}
window.addEventListener('message', onPostMessage, false);

function sendISCNPayload() {
  w.postMessage(JSON.stringify({
    action: 'SUBMIT_ISCN_DATA',
    data: {
      files: [
        {
          filename: 'index.html',
          mimeType: 'text/html',
          data: 'PCFET0NUWVBFIGh0bWw+PGh0bWw+Ci...',
          // bytes encoded in base64
        },
        {
          filename: 'wp-content/uploads/image.png',
          mimeType: 'image/png',
          data: 'iVBORw0KGgoAAAANSUhEUgAABAAAAA...',
        },
      ],
      metadata: {
        name: 'LikeCoin Update &#124; Launching $LIKE Airdrop and Civic Likers Web3',
        tags: ['Airdrop', 'Civic Liker', 'Depub', 'LikeCoin', 'Progress Update'],
        author: 'likecoin',
        description: 'Launch of LikeCoin Airdrop The long-awaited 50 million...',
      }
    },

  }), ISCN_WIDGET_ORIGIN);
}

```

### Interactive Demo

<https://codesandbox.io/s/like-co-iscn-ar-demo-ynenq0?file=/pages/index.vue>


---

# Agent Instructions: 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:

```
GET https://docs.v2.like.co/developer/iscn/web-widget/iscn-ar/reference.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.