# Display files using Fastboard (/en/realtime-media/whiteboard/build/display-files-and-manage-scenes/scenes/display-files-fast/web)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

The Agora Fastboard SDK supports inserting and displaying multiple types of files on the whiteboard, such as images, audio and video, and documents. This enables users to quickly share information in compelling ways in order to create an immersive experience.

This page describes how to call the Fastboard SDK's APIs to insert images, present documents, and play audio and video on the whiteboard.

      
  
      
  
      
    ## Understand the tech [#understand-the-tech-2]

    Fastboard provides APIs for displaying files in the whiteboard main window or sub-windows.

    ## Prerequisites [#prerequisites-2]

    * Integrate Fastboard in your project and join the room. See [Join the whiteboard room](../../set-up-and-build-your-first-app/get-started-uikit#join-the-whiteboard-room).
    * Prepare publicly accessible asset URLs.
    * Make sure file formats are supported, and complete file conversion before presenting documents.

    ## Project setup [#project-setup-2]

    ### Insert Images [#insert-images-2]

    Fastboard provides the [`insertImage`](/en/api-reference/api-ref/uikit-sdk#insertimage) method.

    ```javascript
    await app.insertImage(
        "https://web-cdn.agora.io/website-files/images/interactive-whiteboard-text-tab-1.png"
    );
    ```

    ### Play audio and video [#play-audio-and-video-2]

    Fastboard integrates the media player extension and provides the [`insertMedia`](/en/api-reference/api-ref/uikit-sdk#insertmedia) method.

    ```javascript
    await app.insertMedia(
        "test1.mp4",
        "https://beings.oss-cn-hxxxou.aliyuncs.com/test/aaa59xxxxxxxc695def4/1606277539701637%E7%9A%84%E5%89%AF%E6%9C%AC.mp4"
    );
    ```

    ### Present documents [#present-documents-2]

    Fastboard integrates the docs viewer and slide extensions and provides the [`insertDocs`](/en/api-reference/api-ref/uikit-sdk#insertdocs-12) method.

    ```javascript
    var response = {
        "uuid": "01xxxx82",
        "type": "dynamic",
        "status": "Finished",
        "progress": {
            "totalPageSize": 3,
            "convertedPageSize": 3,
            "convertedPercentage": 100,
            "convertedFileList": [
                {
                    "width": 1280,
                    "height": 720,
                    "conversionFileUrl": "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/01612xxx882/1.slide",
                    "preview": "https://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/01612xxx882/preview/1.png"
                }
            ],
            "currentStep": "Packaging"
        }
    };

    var btn = document.getElementById("addPPT");
    btn.onclick = async function addPPT() {
        await app.insertDocs("My PPT", response);
    };
    ```

    ## Reference [#reference-2]

    Run `npm run dev`. You can see the inserted image, media window, or document window after the page opens.