# Quick Start

## Overview

The v1 Display JavaScript API is used for client webpages to show and interact with iPaper Display instances. Display instances may be directly associated with a given URL by means of pattern matching of the current page URL against a pre-defined pattern in the call-to-action (CTA) button URL value provided.

### Display instance

A Display instance, also known as a “Display”, can be built from the iPaper Admin, if you have the Display module enabled. It is 400px wide and has an arbitrary height, depending on the amount of content in the instance.

### The call-to-action (CTA) button

For every Display instance, a call-to-action (CTA) button is associated with it. The instance and the CTA button can be toggled individually. In a typical zero-configuration ground state:

* if a Display instance is associated with a given URL, the CTA button will be shown on page load. Clicking on the button will reveal the Display instance, which will animate into the viewport from the left or right side offscreen. The Display API can be used to show/hide the button and the Display instance programmatically.
* if a given URL has no Display instance associated with it, no CTA button or Display instance will be shown. However, you can load a Display instance arbitrarily using this API.

The Display Javascript API [exposes magic commands](/display-javascript-api/commands.md) and [emits a custom event upon instantiation](/display-javascript-api/events.md).

## Setup

A Display instance and its CTA button can only be shown on pages that has the Display JavaScript API embedded. The Display API embed script will look something like this, with `<ApiSecret>` being substitued with partner and license-dependent configurations:

```javascript
<!-- Start of Async iPaper Display API script -->
<script>
(function(i,P,a,p,e,r){if(i.getElementById(a=a+'-'+e))return;
r=i.querySelector(P).parentNode.appendChild(i.createElement(P));
r.id=a;r.async=1;r.src=p+'/'+e+'.js'})
(document,'script','ipaper-display-api','//display.ipaper.io/api/v1','<ApiSecret>');
</script>
<!-- End of Async iPaper Display API script -->
```

{% hint style="info" %}
**Note:**

`<ApiSecret>` in the snippet above will be substituted with partner and license-dependent configurations and be automatically populated, when you retrieve the API script from the admin.
{% endhint %}


---

# 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.ipaper.io/display-javascript-api/quick-start.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.