> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pickcel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Display a Custom Web Application or Dashboard on Digital Signage?

> Show any internal web app or dashboard that signs in with an email or username and password on Pickcel digital signage screens. Record the login once with the Pickcel Auth Generator, then pick Live or Snapshot rendering.

Use **Custom Web Application** in the Pickcel Dashboard app to show any web app or dashboard that signs in with an **email or username and a password**. This covers internal ERP, MES, CRM and reporting pages, and any other dashboard without a built-in connector. You record the login once in Chrome, and Pickcel signs in by itself after that. Nobody has to sign in at the screen.

<Warning>
  The sign-in must be a plain email or username and password form. "Sign in with Microsoft/Google" (SSO), SMS codes, push approvals and CAPTCHA can't be automated.
</Warning>

## Live or Snapshot

You choose the mode when you create the app.

| | Live Rendering (recommended) | Snapshot Rendering |
| :- | :- | :- |
| What the screen shows | The real page, updating in real time | An image of the page, refreshed at a set interval |
| Interaction | Interactive, including touch | View only |
| Supported players | Windows, Raspberry Pi | All players |
| Where it signs in | On the player | On Pickcel's rendering server |

* Choose **Live** when your screens run Windows or Raspberry Pi players and the data must update the moment it changes.
* Choose **Snapshot** when your screens use other players (Android, Samsung, LG and so on) or when a delay of a few minutes is fine.

## Before you begin

* A **read-only account** for the web app, used only for signage, not a personal or admin account
* The app's **login page URL** and the **dashboard URL** you want on screen
* **Google Chrome** on a computer that can open the web app

***

## Step 1: Record the login with the Pickcel Auth Generator

<Steps>
  <Step title="Install the Pickcel Auth Generator extension">
    * Download the [Pickcel Auth Generator ZIP](https://console.pickcel.com/players/pickcel-auth-generator.zip) and extract it.
    * In Chrome, open `chrome://extensions` and turn on **Developer mode** (top right).

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-ext-01-developer-mode.RsN1EOxvgn61.png" alt="Developer mode toggle turned on in Chrome Extensions" />
    </Frame>

    * Click **Load unpacked**.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-ext-02-load-unpacked.idp5eGTGl_Jb.png" alt="Load unpacked button in Chrome Extensions" />
    </Frame>

    * Select the extracted `signage-step-recorder-extension-dev` folder and click **Select**.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-ext-03-select-folder.X2xN2uPUopUP.png" alt="Selecting the signage-step-recorder-extension-dev folder and clicking Select" />
    </Frame>

    * **Pickcel Auth Generator** now appears in your extensions. Turn on **Pin new extensions to toolbar** (or pin it from the puzzle-piece menu) for easy access.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-ext-04-loaded.XwW0718V1syr.png" alt="Pickcel Auth Generator 1.1.2 loaded in Chrome Extensions, with Pin new extensions to toolbar" />
    </Frame>
  </Step>

  <Step title="Record the sign-in">
    * Open the web app's login page in Chrome.
    * Click the extension icon, then click the **reset app** icon (top right) to clear any earlier recording.
    * Click **Start Recording**.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-ext-05-popup.QBJP7WRYfdLQ.png" alt="Pickcel Auth Generator popup open on a login page, with the reset app icon and Start Recording" />
    </Frame>

    * The extension icon shows a green **run** badge while it records.
    * Click into each field, then type the email or username and the password.
    * Click the sign-in button. Pressing **Enter** isn't recorded.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-ext-07-recording.XKDJ3FIQnz01.png" alt="Recording in progress: run badge on the extension icon, with the email, password and Sign In button to click" />
    </Frame>
  </Step>

  <Step title="Copy the auth code">
    * Open the exact dashboard page you want on screen and wait for it to load fully.
    * Stop the recording: click the extension icon, then **Get Url**. A window opens with the recorded steps and the **Base 64** code.
    * Click **copy to clipboard**.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-ext-06-get-url.4D7-lqQpemKq.png" width="540" alt="Get Url window showing the JSON data, the Base 64 auth code and copy to clipboard" />
    </Frame>
  </Step>
</Steps>

<Note>
  The copied code contains the username and password. Treat it like a password and don't share it over email or chat. Once applied in the console, Pickcel stores it encrypted.
</Note>

## Step 2: Create the app in Pickcel

<Steps>
  <Step title="Open the Dashboard app">
    * In the Pickcel console, go to **Content** > **Apps**.
    * Search for **Dashboard** and click it.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-01-search.9jRrJfpepm0R.png" alt="Searching for the Dashboard app in Pickcel Apps" />
    </Frame>
  </Step>

  <Step title="Choose a rendering mode">
    * In **Choose Rendering Mode**, click **Choose this mode** under **Live Rendering** or **Snapshot Rendering**.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-02-mode.XAhYR08EjjPU.png" alt="Choose Rendering Mode dialog with Snapshot Rendering and Live Rendering" />
    </Frame>
  </Step>

  <Step title="Select Custom Web Application">
    * Enter a **Name** for the app, for example "Sales KPI Dashboard".
    * In **Select the Dashboard Type**, choose **Custom Web Application**.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-03-custom.xSr0GhFLoE8Z.png" alt="Custom Web Application selected as the dashboard type, with the Auth Code field on the right" />
    </Frame>
  </Step>

  <Step title="Apply the auth code">
    * Paste the copied code into **Auth Code** on the right.
    * Click **Apply Auth Code**. The **Auth Token** field on the left fills in.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-04-authcode.zUMRssxgOzy5.png" alt="Auth code pasted into the Auth Code field, ready to apply" />
    </Frame>
  </Step>

  <Step title="Set Snapshot options (Snapshot mode only)">
    Live mode has no extra settings, so skip to the next step. In Snapshot mode, set:

    * **Screen Selection Code** (optional): show only part of the page. Create it with the [Dashboard Screen Mapper](/apps/dashboard-apps/screen-mapper).
    * **Refresh Interval**: how often a new capture is taken. 5–10 minutes suits most dashboards.
    * **Session Expiry**: how often Pickcel signs in again. Keep it shorter than the web app's own session timeout.
    * **Enable Auto Scroll** / **Enable Auto Scroll Height** (optional): scroll tall pages.

    <Frame>
      <img src="https://cdn.pickcel.com/images/pickcel-docs/custom-web-app/custom-web-app-06-snapshot-settings.D4ZGrO-yHghC.png" alt="Snapshot mode settings: Screen Selection Code, Refresh Interval, Session Expiry and auto scroll" />
    </Frame>
  </Step>

  <Step title="Create and publish">
    * Click **Create App**. The app appears in **Content** > **Media**.
    * Click its thumbnail to preview. The first sign-in can take up to 2 minutes.
    * Publish it to your screens like any other media, full screen or in a zone of a [composition](/compositions/compositions).
  </Step>
</Steps>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="The screen or preview shows the login page instead of the dashboard">
    The credentials are wrong or the login page has changed. Record the login again and apply the new code.
  </Accordion>

  <Accordion title="It stopped working after a password change">
    The code still holds the old password. Record the login again and update the app.
  </Accordion>

  <Accordion title="The screen falls back to the login page after a few hours (Snapshot)">
    The web app's session expires before Pickcel signs in again. Lower **Session Expiry**.
  </Accordion>

  <Accordion title="The extension shows &#x22;Data not available&#x22; or &#x22;URL not available&#x22;">
    The steps weren't captured. Click the **reset app** icon, then record again, clicking into each field and clicking the sign-in button.
  </Accordion>

  <Accordion title="Live mode shows nothing on an Android, Samsung or LG screen">
    Live mode runs only on Windows and Raspberry Pi players. Use Snapshot mode for other players.
  </Accordion>
</AccordionGroup>

## What's next?

* [Which dashboard app should I use?](/faqs/dashboard-matrix)
* [Publish or schedule content](/schedule-and-publish/publish-overview)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.