# Embedding an Osmos Uploader

## Overview

Embed the Osmos Uploader within your app or website to offer a self-serve data import experience to your customers, partners, or vendors.  Follow the steps below to embed your first Uploader.

## Prerequisites

1. [Destination Connector](/destination-connectors.md)
2. Uploader HTML Snippet (Provided in [Uploader Setup](/uploader/uploader-setup.md))
3. Access to your webpage HTML

{% hint style="info" %}
Note:  You can also embed your Osmos Uploader within a React app.  See below for instructions.
{% endhint %}

## Implementing an Osmos Uploader on Your Webpage

**Step 1:** Navigate to your web hosting provider's **page configuration** menu

**Step 2:** Copy the HTML Snippet from the Osmos platform

<figure><img src="/files/wGr6njI9aF08dkNd9HYg" alt=""><figcaption></figcaption></figure>

**Step 3:** Paste the snippet into your web page at the point where you'd like it to display on the page. Include both script tags and the button element together.

**Step 4:** Edit the snippet to set custom **`displayName`** and **`description`** values for schema. These will be shown to the user in place of the actual name. Note that you should not change the ordering of the fields from the order it appears in the snippet example.

<figure><img src="/files/qgtE0dRs14mjBxnQNC0t" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Many additional configuration options are available. See [Optional Configuration](/developer-docs/optional-uploader-settings.md) for more detail.
{% endhint %}

## Embed Osmos Uploader in React App

To Embed Osmos Uploader in a React App, please use the GitHub example below:

{% embed url="<https://github.com/Osmos-io/examples/tree/main/examples/osmos-uploader-with-reactjs-and-typescript>" %}

## Embed Osmos Uploader in NextJS App

To Embed Osmos Uploader in a NextJS App, please use the GitHub example below:

{% embed url="<https://github.com/Osmos-io/examples/tree/main/examples/osmos-uploader-with-nextjs-and-typescript>" %}


---

# 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.osmos.io/developer-docs/webpage-integration.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.