# Widget Customization
source: https://developer.mastercard.com/eligibility-api/documentation/tutorials-and-guides/widget-tutorial/widget-customization/index.md

The widget supports extensive customization. Below are all available configuration sections with JavaScript examples.

### Core Styling Sections {#core-styling-sections}

#### 1. Core Configuration {#1-core-configuration}

Required core properties for widget initialization.

```javascript
"vendorCode": "VENDOR123",  //  Your unique vendor identifier
"widgetType": "benefits"     // Widget mode: "benefits" or "identifier"
```

#### 2. Asset Configuration (asset) {#2-asset-configuration-asset}

Custom icon assets for locked/unlocked states.

```javascript
"asset": {
    "locked": "assets/Locked.svg",      // Path to locked icon SVG
    "unlocked": "assets/Unlocked.svg"   // Path to unlocked icon SVG
}
```

#### 3. PAN Input Field Configuration (pan) {#3-pan-input-field-configuration-pan}

Complete styling options for the card number input field.

```javascript
"pan": {
    "width": "100%",
    "height": "50px",
    "padding": "15px 20px",
    "border": "2px solid #0277bd",
    "borderFocus": "3px solid #01579b",
    "fontFamily": "'Roboto', sans-serif",
    "fontSize": "16px",
    "fontColor": "#01579b",
    "backgroundColor": "#ffffff",
    "borderRadius": "8px",
    "label": "Card Number",
    "placeholder": "1234 5678 1234 5678",
    "accessibility": "Please enter your 16-digit card number",
    "errorMessage": "Please check your card number",
    "backgroundImage": "url('icon-credit-card-black.svg')",
    "backgroundSize": "20px 20px",
    "backgroundRepeat": "no-repeat",
    "backgroundPosition": "left 10px center"
}
```

**Available Icon Options:**

* `icon-credit-card-black.svg` - Generic credit card icon
* `icon-mc-logo.svg` - Mastercard logo icon

#### 4. Submit Button Configuration (submit) {#4-submit-button-configuration-submit}

Comprehensive button styling with responsive options.

```javascript
"submit": {
    "width": "auto",
    "minWidth": "150px",
    "maxWidth": "300px",
    "padding": "15px 30px",
    "backgroundColor": "#0277bd",
    "color": "#ffffff",
    "height": "50px",
    "borderRadius": "8px",
    "border": "none",
    "fontSize": "16px",
    "fontFamily": "'Roboto', sans-serif",
    "fontWeight": "bold",
    "textAlign": "center",
    "textTransform": "uppercase",
    "cursor": "pointer",
    "display": "inline-flex",
    "alignItems": "center",
    "justifyContent": "center",
    "hoverOpacity": "0.8",
    "hoverTransform": "scale(1.02)",
    "hoverTransition": "all 0.3s ease",
    "activeTransform": "scale(0.98)",
    "overflow": "hidden",
    "textOverflow": "ellipsis",
    "whiteSpace": "nowrap",
    "label": "Check Benefits",
    "accessibility": "Submit card number",
    "errorMessage": "Please fix errors",
    // Mobile responsiveness
    "mobileMinWidth": "100px",
    "mobilePadding": "12px 20px",
    "mobileFontSize": "14px",
    // Tiny screens
    "tinyMinWidth": "90px",
    "tinyPadding": "10px 15px",
    "tinyFontSize": "13px"
}
```

#### 5. Tooltip Configuration (tooltip) {#5-tooltip-configuration-tooltip}

Tooltip styling including arrow configuration.

```javascript
"tooltip": {
    "backgroundColor": "#333",
    "color": "#ffffff",
    "fontSize": "12px",
    "borderRadius": "8px",
    "padding": "10px 15px",
    "maxWidth": "350px",
    "minWidth": "200px",
    "boxShadow": "0 4px 12px rgba(0,0,0,0.2)",
    "textAlign": "center",
    "position": "absolute",
    "zIndex": "9999",
    "bottom": "110%",
    "left": "50%",
    "transform": "translateX(-50%)",
    "whiteSpace": "normal",
    "pointerEvents": "none",
    "opacity": "0.95",
    "marginTop": "10px",
    "message": "Enter your 16-digit card number",
    // Arrow styling
    "arrowBorderColor": "#333",
    "arrowBorderWidth": "8px",
    "arrowBorderStyle": "solid",
    "arrowMarginLeft": "-8px",
    "arrowContent": "",
    "arrowPosition": "absolute",
    "arrowTop": "100%",
    "arrowLeft": "50%"
}
```

#### 6. Widget Container Configuration (widgetContainer) {#6-widget-container-configuration-widgetcontainer}

Main container styling with responsive options.

```javascript
"widgetContainer": {
    "display": "flex",
    "flexDirection": "column",
    "alignItems": "center",
    "justifyContent": "center",
    "width": "100%",
    "maxWidth": "600px",
    "minWidth": "300px",
    "margin": "20px auto",
    "padding": "30px",
    "backgroundColor": "#ffffff",
    "borderRadius": "12px",
    "border": "1px solid #e0e0e0",
    "boxSizing": "border-box",
    "overflow": "hidden",
    // Mobile responsiveness
    "mobileMinWidth": "280px",
    "mobilePadding": "20px",
    // Tiny screens
    "tinyMinWidth": "250px",
    "tinyPadding": "15px"
}
```

#### 7. PAN Container Configuration (panContainer) {#7-pan-container-configuration-pancontainer}

Container wrapper for the PAN input field.

```javascript
"panContainer": {
    "display": "flex",
    "flexDirection": "column",
    "gap": "15px",
    "width": "100%",
    "boxSizing": "border-box"
}
```

#### 8. Submit Button Wrapper Configuration (submitButton) {#8-submit-button-wrapper-configuration-submitbutton}

Wrapper configuration for submit button positioning.

```javascript
"submitButton": {
    "marginTop": "20px",
    "width": "100%",
    "display": "flex",
    "justifyContent": "center"
}
```

#### 9. Button Wrapper Configuration (buttonWrapper) {#9-button-wrapper-configuration-buttonwrapper}

Additional button wrapper styling.

```javascript
"buttonWrapper": {
    "width": "100%",
    "display": "flex",
    "justifyContent": "center"
}
```

#### 10. Error States Configuration (errorStates) {#10-error-states-configuration-errorstates}

Error message and invalid state styling.

```javascript
"errorStates": {
    "color": "#d32f2f",
    "fontSize": "13px",
    "marginTop": "6px",
    "fontWeight": "500",
    "invalidBorder": "2px solid #d32f2f",
    "textAlign": "left"
}
```

#### 11. Input Wrapper Configuration (inputWrapper) {#11-input-wrapper-configuration-inputwrapper}

Wrapper styling for input field with icon spacing.

```javascript
"inputWrapper": {
    "position": "relative",
    "width": "100%",
    "display": "flex",
    "alignItems": "center",
    "paddingRight": "50px",    // Space for lock/unlock icon
    "paddingLeft": "45px",     // Space for card icon
    "marginBottom": "10px",
    "boxSizing": "border-box"
}
```

#### 12. Label Configuration (label) {#12-label-configuration-label}

Label styling for input fields.

```javascript
"label": {
    "fontFamily": "'Arial', sans-serif",
    "fontSize": "16px",
    "fontWeight": "500",
    "fontColor": "#555555",
    "textTransform": "uppercase",
    "letterSpacing": "0.5px",
    "paddingBottom": "8px",
    "textAlign": "left"
}
```

#### 13. Disabled States Configuration (disabledStates) {#13-disabled-states-configuration-disabledstates}

Styling for disabled and loading states.

```javascript
"disabledStates": {
    "opacity": "0.5",
    "cursor": "not-allowed",
    "backgroundColor": "#e0e0e0",
    "loadingOpacity": "0.6",
    "loadingBackgroundColor": "#f0f0f0"
}
```

#### 14. Focus States Configuration (focusStates) {#14-focus-states-configuration-focusstates}

Focus outline styling for accessibility.

```javascript
"focusStates": {
    "outline": "3px solid #0277bd",
    "outlineOffset": "2px"
}
```

#### 15. Icon Configuration (icon) {#15-icon-configuration-icon}

Lock/unlock toggle icon styling.

```javascript
"icon": {
    "position": "absolute",
    "left": "auto",
    "right": "15px",
    "paddingTop": "5px",
    "width": "24px",
    "height": "24px",
    "cursor": "pointer",
    "verticalAlign": "middle",
    "transition": "all 0.3s ease",
    "hoverFilter": "brightness(1.2)",
    "zIndex": "10",
    "top": "50%",
    "transform": "translateY(-50%)"
}
```

#### 16. Credit Card Icon Configuration (creditCardIcon) {#16-credit-card-icon-configuration-creditcardicon}

Card brand/type indicator icon styling.

```javascript
"creditCardIcon": {
    "width": "24px",
    "height": "24px",
    "position": "absolute",
    "left": "15px",
    "top": "50%",
    "right": "auto",
    "transform": "translateY(-50%)",
    "zIndex": "5",
    "transition": "opacity 0.3s ease",
    "hoverFilter": "brightness(1.1)"
}
```

#### 17. Mobile Responsive Configuration (mobileResponsive) {#17-mobile-responsive-configuration-mobileresponsive}

Mobile-specific overrides for smaller screens.

```javascript
"mobileResponsive": {
    "tooltipMaxWidth": "200px",
    "tooltipFontSize": "11px"
}
```

#### 18. Layout Configuration (layout) {#18-layout-configuration-layout}

Global layout properties for consistent styling across the widget.

```javascript
"layout": {
    "inputPadding": "15px",
    "inputBorder": "2px solid",
    "inputFontSize": "18px",
    "buttonMarginTop": "20px",
    "buttonFontSize": "18px",
    "buttonFontWeight": "600",
    "buttonBorder": "none",
    "buttonCursor": "pointer",
    "buttonHoverOpacity": "0.8",
    "fontFamily": "'Inter', sans-serif",
    "submitButtonPaddingBottom": "24px",
    "buttonHoverTransform": "scale(1.02)",
    "buttonHoverTransition": "all 0.3s ease",
    "buttonActiveTransform": "scale(0.98)"
}
```

#### 19. Error Configuration (error) {#19-error-configuration-error}

Global error message styling.

```javascript
"error": {
    "color": "#d32f2f",
    "marginTop": "10px",
    "fontSize": "13px",
    "textAlign": "center"
}
```

#### 20. Theme Configuration (theme) {#20-theme-configuration-theme}

Overall widget theme properties for consistent branding.

```javascript
"theme": {
    "backgroundColor": "#f8f9fa",
    "borderColor": "#e0e0e0",
    "textColor": "#212121",
    "borderRadius": "12px",
    "boxShadow": "0 4px 12px rgba(0,0,0,0.1)"
}
```

#### 21. Host Configuration (host) {#21-host-configuration-host}

Host element styling for the web component.

```javascript
"host": {
    "display": "block",
    "width": "100%",
    "minWidth": "300px"
}
```

#### 22. Iframe Configuration (iframe) {#22-iframe-configuration-iframe}

Iframe-specific configuration for embedded mode.

```javascript
"iframe": {
    "width": "100%",
    "height": "auto",
    "minHeight": "300px",
    "border": "none",
    "overflow": "hidden"
}
```

#### 23. Container Configuration (container) {#23-container-configuration-container}

Root container properties.

```javascript
"container": {
    "width": "100%",
    "height": "auto",
    "overflow": "visible"
}
```

### Complete Styling Example {#complete-styling-example}

Here's a comprehensive example combining multiple configuration sections:

```html
<benefits-search data='{
    "vendorCode": "VENDOR123",
    "widgetType": "benefits",
    "widgetContainer": {
        "maxWidth": "600px",
        "padding": "30px",
        "backgroundColor": "#ffffff",
        "borderRadius": "12px",
        "border": "1px solid #e0e0e0"
    },
    "pan": {
        "height": "50px",
        "padding": "15px 20px",
        "border": "2px solid #0277bd",
        "borderRadius": "8px",
        "fontSize": "16px",
        "fontFamily": "\"Roboto\", sans-serif",
        "label": "Card Number",
        "placeholder": "Enter your 16-digit card number",
        "backgroundImage": "url(\"icon-credit-card-black.svg\")",
        "backgroundSize": "20px 20px",
        "backgroundRepeat": "no-repeat",
        "backgroundPosition": "left 10px center"
    },
    "submit": {
        "width": "auto",
        "minWidth": "200px",
        "padding": "15px 30px",
        "backgroundColor": "#0277bd",
        "color": "#ffffff",
        "borderRadius": "8px",
        "fontSize": "16px",
        "fontWeight": "bold",
        "textTransform": "uppercase",
        "label": "Check Benefits",
        "hoverOpacity": "0.85"
    },
    "label": {
        "fontSize": "14px",
        "fontWeight": "500",
        "fontColor": "#333333",
        "paddingBottom": "8px"
    },
    "errorStates": {
        "color": "#d32f2f",
        "fontSize": "13px",
        "invalidBorder": "2px solid #d32f2f"
    },
    "tooltip": {
        "backgroundColor": "#333333",
        "color": "#ffffff",
        "fontSize": "12px",
        "borderRadius": "6px",
        "padding": "8px 12px"
    },
    "theme": {
        "backgroundColor": "#f8f9fa",
        "borderColor": "#dee2e6",
        "textColor": "#333333",
        "borderRadius": "8px"
    }
}'></benefits-search>
```

### Minimal Configuration Example {#minimal-configuration-example}

For a quick start with default styling:

```html
<benefits-search data='{
    "vendorCode": "VENDOR123",
    "widgetType": "benefits"
}'></benefits-search>
```

### Custom Branding Example {#custom-branding-example}

Example with company branding colors:

```html
<benefits-search data='{
    "vendorCode": "VENDOR123",
    "widgetType": "benefits",
    "pan": {
        "border": "2px solid #1976d2",
        "borderRadius": "4px",
        "fontSize": "16px"
    },
    "submit": {
        "backgroundColor": "#1976d2",
        "color": "#ffffff",
        "borderRadius": "4px",
        "label": "Verify Card Benefits",
        "fontWeight": "600"
    },
    "theme": {
        "backgroundColor": "#ffffff",
        "textColor": "#333333"
    }
}'></benefits-search>
```