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: "",
  templateId: "",
  accessToken: "",
  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.

---

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