LogoLogo
Back to OsmosDeveloper DocsOsmos BlogWhat's New
  • Welcome to Osmos
  • ๐Ÿ‘‹Getting Started with Osmos
    • Terminology
  • ๐ŸŽ‰What's New
  • ๐ŸงฉOsmos API Reference
  • โŒจ๏ธOsmos Chat
  • ๐Ÿ‘ฉโ€๐Ÿ’ปDeveloper Docs
    • Manage API Keys
    • Embedding an Osmos Uploader
    • Embedding Uploader Jobs Table
    • Turning on Advanced Mode Uploader
    • Customizing Uploader Styling
    • Passing Parameterized Fields
    • Configuring Uploader's "Recall" functionality
    • Optional Uploader Settings
    • Uploader Submission Callback
    • Configuring AutoClean for your Uploader
    • Uploader Client-Side Validation
      • Data Validators
      • Checking for Duplicate values in a field
      • Creating Dropdown-Controlled Fields
      • Dynamic Dropdown Options
      • Dropdown Interaction with Validation Functions
    • Validation and Transformation Webhooks
      • OpenAPI Validation Webhook Testing
    • Parser Webhook for file based connectors
  • ๐Ÿ” Datasets
    • Osmos Datasets
      • Uploading Data to your Table
      • Creating Primary and Foreign keys
      • Osmos Dataset Destination Connector
      • Osmos Dataset Source Connector
      • Dataset Edits
    • Datasets Query Builder
      • Query Builder Metadata
    • Performing Look Ups
      • Performing Joins
        • Types of Joins
  • โ๏ธUploader
    • Creating an Osmos Uploader
      • Testing your Osmos Uploader
    • Uploader Validation Summary
    • Advanced Mode
      • Overview
      • Process
    • Standard Mode
      • Overview
      • AutoClean
      • Process
    • AI AutoMapping
    • Uploaders Page
    • Uploader Details Page
  • ๐Ÿ”€Pipelines
    • Step 1. Select the Source
    • Step 2. Select a Destination
    • Step 3. Map & Transform Data
    • Step 4. Schedule the Pipeline
    • Step 5. Review & Confirm
    • Pipelines Page
    • Pipeline Details Page
  • โฉData Transformations
    • AutoMap
    • Column Mapping & Data Cleanup Panel
    • QuickFixes
    • AI Value Mapping
    • AI AutoClean
    • Lookups
      • Performing Lookups
    • SmartFill
    • Formulas
      • Date & Time Formulas
        • DateTime Format Specifiers
        • Timezone specifiers
      • Math Formulas and Operators
      • Logical Formulas & Operators
        • True & False Casting
      • Text Formulas
      • Other Formulas
    • Deduplication
  • โ†˜๏ธSource Connectors
    • Amazon S3
    • Azure Blob Storage
    • BigQuery
    • Email
    • FTP
    • Google Cloud Storage (GCS)
    • Google Drive
    • Google Sheets
    • HTTP API (Call an Osmos API)
    • HTTP API (Osmos Calls Your API)
    • Osmos Dataset
    • Snowflake
    • Accessing Sources behind firewall
  • โ†–๏ธDestination Connectors
    • Amazon S3
    • BigQuery
    • FTP
    • Google Cloud Storage (GCS)
    • Google Drive
    • Google Sheets
    • HTTP API (Call an Osmos API)
    • HTTP API (Osmos Calls Your API)
      • Passing Dynamic Tokens in the API Header
    • MySQL
    • Osmos Dataset
    • PostgreSQL
    • Snowflake
    • Accessing Destinations behind firewall
  • ๐Ÿ—‚๏ธProjects
  • โš™๏ธAdministration
    • Email Notifications
  • ๐Ÿ”’Security
  • ๐Ÿ“žSupport
  • Back to Osmos.io
Powered by GitBook
On this page
  • Overview
  • Prerequisites
  • Implementing an Osmos Uploader on Your Webpage
  • Embed Osmos Uploader in React App
  • Embed Osmos Uploader in NextJS App

Was this helpful?

  1. Developer Docs

Embedding an Osmos Uploader

This page outlines the implementation process for installing an Osmos Uploader from the Osmos platform onto your webpage.

PreviousManage API KeysNextEmbedding Uploader Jobs Table

Last updated 1 year ago

Was this helpful?

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. Uploader HTML Snippet (Provided in )

  2. Access to your webpage HTML

Note: You can also embed your Osmos Uploader within a React app. See below for instructions.

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

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.

Embed Osmos Uploader in React App

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

Embed Osmos Uploader in NextJS App

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

Many additional configuration options are available. See for more detail.

๐Ÿ‘ฉโ€๐Ÿ’ป
Optional Configuration
Destination Connector
Uploader Setup
examples/examples/osmos-uploader-with-reactjs-and-typescript at main ยท Osmos-io/examplesGitHub
examples/examples/osmos-uploader-with-nextjs-and-typescript at main ยท Osmos-io/examplesGitHub
Logo
Logo