LogoLogo
  • iPaper Technical Documentation
  • Display Analytics
    • Google Analytics
  • Display JavaScript API
    • Quick Start
    • Commands
    • Events
  • Flipbook Analytics
    • Adobe Analytics events
    • Google Analytics / GTM events
  • Flipbook Backend API
    • Overview
    • Return Codes
    • Ecommerce
      • GetFlipbookOrdersByType
      • GetLicenseOrdersByType
    • Image
      • GetImageWith2PxDropShadow
    • Link
      • GetLinks
    • Media
      • CreateDirectory
      • DeleteDirectory
      • DeleteFile
      • GetTree
      • UploadFile
    • Paper
      • ChangePaperUrl
      • ClearPublicationPeriod
      • CreateCategory
      • CreatePaper
      • CreatePreviewToken
      • DeletePaper
      • GetAllPapers
      • GetPaperIDFromUrl
      • GetPaperStructure
      • GetPaperUrlFromID
      • GetSetting
      • GetSettingDescriptions
      • MovePaper
      • SetPublicationPeriod
      • SetSetting
    • Ripper
      • GetProcessingPapers
      • GetProcessingStatus
      • ProcessPDF
      • ReprocessPaper
    • Search
      • SearchPapersByContent
      • SearchPapersByCustomFields
      • SearchPapersWithHiearchyByContent
      • SearchPapersWithHiearchyByName
    • Statistics
      • GetNumberOfPageviewsPerDay
      • GetNumberOfVisitors
      • GetNumberOfVisitorsPerDay
  • Flipbook Enrichment
    • Popup Content
    • Popup Frame
  • Flipbook Integration
    • Custom Domain
    • Custom Mail
    • Embedding flipbooks inside iOS and Android App
    • Form Integration
    • Iframing Flipbooks
    • iPaper Embed Script (Pop-ups)
    • Embeds (Minipapers)
    • Query String Parameters
    • Remote Authentication
    • Shop Export
  • Flipbook JavaScript API
    • Getting Started
    • Commands & Events
      • Basket
      • Consent
        • Example Implementations
          • UserCentrics
          • OneTrust
          • CookieInformation
          • Cookiebot
      • Paging
      • Publication
      • Search
      • Table of Contents
      • Sharing
    • Advanced Usage
    • Migration guide
    • Legacy Javascript API (v2)
      • Quick Start
      • Commands
      • Events
      • Consent Management
      • Advanced Usage
  • Technical Information
    • Cookie Information
    • Common security questions
    • Open Source
Powered by GitBook
On this page
  • Overview
  • Display instance
  • The call-to-action (CTA) button
  • Setup
  1. Display JavaScript API

Quick Start

The v1 Display JavaScript API allows for streamlined interaction a Display instance

PreviousGoogle AnalyticsNextCommands

Last updated 2 years ago

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

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:

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

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.

exposes magic commands
emits a custom event upon instantiation