LogoLogo
WebsiteCommunity
  • Overview
    • Introduction
    • How to use it? In 5 steps
  • Importer
    • React Embed
    • Angular Embed
    • Bubble.io Embed
    • HTML & JS Embed
    • Text Customization
    • Directly Enter your Data
    • Select Header Row
  • Data Retrieval
    • Using Webhook
    • Using Frontend Callback
  • Validations
    • Base Validations
    • Advanced Validations
  • Features
    • Data Seeding
    • Import Excel with Image
    • Automated Import
    • Runtime Schema
    • Custom Validation
    • Default Value
    • Column Description
    • Freeze Columns
    • Multiselect Dropdown
    • Output Customization
  • Widget Customization
  • Column Warning
  • Platform
    • Email Alerts
    • Activity Page
    • Manage Project
    • Make Your Team
    • How subscription works?
  • Additional Resources
    • FAQs
    • Architecture
    • Data Migrations
    • Selfhost Impler
    • Run Impler locally
    • Writing effectively into .xlsm files
  • Changelog
Powered by GitBook
On this page
  • Basic Example and Setup
  • AppearanceConfig type definition
  • ApperaranceConfig Property with Available Customization Options
  • Quick Note

Was this helpful?

Edit on GitHub
Export as PDF

Widget Customization

Customise your import widget to match your brand and design system using the AppearanceConfig options.

Basic Example and Setup

const { showWidget, isImplerInitiated } = useImpler({
  projectId: "673b4749998f0403d8491f59",
  templateId: "6839498aec2bd4236c74ebda",
  accessToken: "dde9212958056095b59ebe39a897d369",
  appearance: {
    primaryColor: '#FF6B35',
    fontFamily: 'Inter',
    borderRadius: '8px'
  }
});

AppearanceConfig type definition

export type AppearanceConfig = {
  widget?: {
    backgroundColor?: string;
  };
  primaryColor?: string;
  fontFamily?: string;
  borderRadius?: string;
  primaryButtonConfig?: ButtonConfig;
  secondaryButtonConfig?: ButtonConfig;
};
export type ButtonConfig = {
  backgroundColor?: string;
  buttonShadow?: string;
  textColor?: string;
  hoverBackground?: string;
  hoverBorderColor?: string;
  borderColor?: string;
  hoverTextColor?: string;
};

Note - All properties, including the appearance object, are optional. If none are provided, the widget will fall back to its default appearance.

ApperaranceConfig Property with Available Customization Options

Widget Properties:

  • backgroundColor - Sets the main widget background color

  • primaryColor - Main brand color used throughout the widget

  • fontFamily - Font family for all text elements

  • borderRadius - Corner rounding for all elements

Button Properties:

  • backgroundColor - Button background color (default state)

  • textColor - Button text color (default state)

  • borderColor - Button border color (default state)

  • buttonShadow - Drop shadow effect

  • hoverBackground - Background color when hovering

  • hoverTextColor - Text color when hovering

  • hoverBorderColor - Border color when hovering

Quick Note

⚠️ Important: We're moving primaryColor inside the appearance object. The old way still works but will be deprecated in future releases.

PreviousOutput CustomizationNextColumn Warning

Last updated 1 day ago

Was this helpful?


If you have any questions, suggestions, or comments. Feel free to reach out to us over . We’re constantly improving to deliver the best Data Importer for your product, and we value your input.

Discord