Skip to content

widget-customization.md

Latest commit

 

History

History
84 lines (62 loc) · 2.01 KB

widget-customization.md

File metadata and controls

84 lines (62 loc) · 2.01 KB
description Customise your import widget to match your brand and design system using the AppearanceConfig options.
icon text-size

Widget Customization

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.

{% include ".gitbook/includes/your-feedback-is-crucial-in....md" %}