Embedding Rowporter

Add data import to your application

Embedding Options

Rowporter can be embedded in your application using either an iframe or our JavaScript SDK. Choose the method that best fits your needs.

iframe Embed

Simple, no-code integration

✓ Copy and paste HTML
✓ No JavaScript required
✓ Works everywhere
✗ Limited customization
✗ No event callbacks

JavaScript SDK

Full control and flexibility

✓ Open as modal or inline
✓ Event callbacks
✓ Full theming support
✓ Programmatic control
✓ Custom styling

iframe Embed

The simplest way to add Rowporter to your site. Just copy and paste this HTML:

html

<!-- Rowporter Embed -->
<iframe
  src="https://rowporter.com/embed/YOUR_TEMPLATE_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
  style="border: 1px solid #e5e7eb; border-radius: 8px;"
></iframe>

Replace YOUR_TEMPLATE_ID with your actual template ID from the dashboard.

JavaScript SDK

Installation

Add the Rowporter SDK to your page:

html

<script src="https://rowporter.com/embed.js"></script>

Initialization

Initialize the importer with your configuration:

html

<script>
  Rowporter.init({
    templateId: "YOUR_TEMPLATE_ID",
    onComplete: (result) => {
      console.log('Import completed:', result);
      // result.data - array of imported rows
      // result.totalRows - total row count
    },
    onError: (error) => {
      console.error('Import failed:', error);
    },
    onCancel: () => {
      console.log('Import cancelled');
    }
  });

  // Option 1: Use bindButton (handles DOM timing safely)
  Rowporter.bindButton('#import-button');
</script>

<button id="import-button">Import Data</button>

<!-- Option 2: Use data attribute (simplest) -->
<button data-rowporter-open>Import Data</button>

Opening the Importer

Open the importer modal when the user clicks a button:

html

<button id="import-btn">Import Data</button>

<script>
  document.getElementById('import-btn').addEventListener('click', () => {
    Rowporter.open();
  });
</script>

Configuration Options

Option	Type	Description
`templateId`	string	Required. Your template ID
`user`	object	Optional. User info { id, email }
`modal`	boolean	Open as modal (default: true)
`locale`	string	Language code (en, de, fr, es)
`theme`	object	Custom theme colors
`metadata`	object	Custom data passed to webhooks

White-Labeling & Theming

Rowporter offers comprehensive white-labeling options to match your brand. You can customize colors, typography, layout, and even inject custom CSS. Settings can be configured via the dashboard or programmatically via the SDK.

Color Customization

Customize every color in the import widget:

javascript

Rowporter.init({
  templateId: "YOUR_TEMPLATE_ID",
  theme: {
    // Colors
    primaryColor: "#3B82F6",      // Primary buttons, active states
    secondaryColor: "#1E40AF",    // Secondary elements
    accentColor: "#10B981",       // Accent highlights
    backgroundColor: "#FFFFFF",   // Widget background
    textColor: "#111827",         // Primary text color
    borderColor: "#E5E7EB",       // Borders and dividers
    errorColor: "#EF4444",        // Error states, validation
    successColor: "#22C55E",      // Success states
  },
  onComplete: (result) => console.log(result),
  onError: (error) => console.error(error)
});

Typography

Customize fonts and text sizing:

javascript

Rowporter.init({
  templateId: "YOUR_TEMPLATE_ID",
  theme: {
    // Typography
    fontFamily: "Inter, system-ui, sans-serif",
    headingFontFamily: "Cal Sans, Inter, sans-serif",
    fontSize: "medium",  // "small" | "medium" | "large"
  },
  onComplete: (result) => console.log(result),
  onError: (error) => console.error(error)
});

Font Size	Base	Headings
small	13px	16px
medium	14px	18px
large	16px	20px

Layout & Style

Customize border radius, button styles, and header appearance:

javascript

Rowporter.init({
  templateId: "YOUR_TEMPLATE_ID",
  theme: {
    // Layout
    borderRadius: "medium",   // "none" | "small" | "medium" | "large" | "full"
    buttonStyle: "filled",    // "filled" | "outline" | "ghost"
    headerStyle: "default",   // "default" | "minimal" | "hidden"
  },
  onComplete: (result) => console.log(result),
  onError: (error) => console.error(error)
});

Border Radius	Value
none	0px
small	4px
medium	8px
large	12px
full	9999px (pill shape)

Branding

Add your logo and control the "Powered by" badge:

javascript

Rowporter.init({
  templateId: "YOUR_TEMPLATE_ID",
  theme: {
    // Branding
    logoUrl: "https://yoursite.com/logo.png",
    faviconUrl: "https://yoursite.com/favicon.ico",
    showPoweredBy: false,  // Requires paid plan
  },
  onComplete: (result) => console.log(result),
  onError: (error) => console.error(error)
});

Note: Removing the "Powered by Rowporter" badge requires a paid plan (Starter or above).

Custom Text

Customize the text shown in the widget:

javascript

Rowporter.init({
  templateId: "YOUR_TEMPLATE_ID",
  locale: "en",  // "en" | "es" | "fr" | "de" | "pt" | "it" | "nl" | "ja" | "zh" | "ko"
  theme: {
    // Custom Text
    customWelcomeText: "Upload your CSV or Excel file to import contacts",
    customSuccessText: "Great! Your contacts have been imported successfully.",
    customErrorText: "Oops! Something went wrong. Please try again.",
  },
  onComplete: (result) => console.log(result),
  onError: (error) => console.error(error)
});

Custom CSS

Inject custom CSS for advanced styling. Use CSS variables for dynamic theming:

javascript

Rowporter.init({
  templateId: "YOUR_TEMPLATE_ID",
  theme: {
    customCss: `
      .rowporter-widget {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
      .rowporter-widget button {
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    `
  },
  onComplete: (result) => console.log(result),
  onError: (error) => console.error(error)
});

Available CSS Variables

Variable	Description
--rp-primary	Primary color
--rp-secondary	Secondary color
--rp-accent	Accent color
--rp-background	Background color
--rp-text	Text color
--rp-border	Border color
--rp-error	Error color
--rp-success	Success color
--rp-font-family	Body font family
--rp-heading-font	Heading font family
--rp-radius	Border radius

Complete Theme Example

Here's a complete example with all theme options:

javascript

Rowporter.init({
  templateId: "tpl_abc123",
  locale: "en",
  
  theme: {
    // Colors
    primaryColor: "#6366F1",
    secondaryColor: "#4F46E5",
    accentColor: "#10B981",
    backgroundColor: "#FAFAFA",
    textColor: "#1F2937",
    borderColor: "#E5E7EB",
    errorColor: "#EF4444",
    successColor: "#22C55E",
    
    // Branding
    logoUrl: "https://yoursite.com/logo.png",
    showPoweredBy: false,
    
    // Typography
    fontFamily: "Inter, system-ui, sans-serif",
    headingFontFamily: "Inter, system-ui, sans-serif",
    fontSize: "medium",
    
    // Layout
    borderRadius: "large",
    buttonStyle: "filled",
    headerStyle: "default",
    
    // Custom Text
    customWelcomeText: "Drop your file here to get started",
    customSuccessText: "Your data has been imported!",
    
    // Custom CSS
    customCss: `
      .rowporter-widget {
        font-smooth: always;
      }
    `
  },
  
  // Callbacks (always include these!)
  onComplete: (result) => {
    console.log('Import completed:', result);
  },
  onError: (error) => {
    console.error('Import failed:', error);
  }
});

React SDK

Coming Soon

We're working on a React SDK with hooks and components for seamless integration with React applications. Stay tuned!

Back to Documentation