# Configuration Types

For an example of how to implement the following configuration types in your application, check out the [Customization Guide](/old-v2-documentation-deprecated/add-a-widget/widget/customization-guide.md#full-configuration-example).

### All configuration types

```jsx
export type ColorType // The color format must be of type #FFFFFF
export type SlippageOption = 0.5 | 1 | 1.5 | 3;
export type TokenConfig = {
  address: string;
  chainId: number | string;
};

export interface AppConfig {
  companyName?: string;
  slippage?: SlippageOption;
  style?: ConfigTheme;
  enableExpress?: boolean;
  enableGetGasOnDestination?: boolean; // If set to true, will enable getting gas on destination on widget loads.
  infiniteApproval?: boolean;
  loadPreviousStateFromLocalStorage?: boolean;
  apiUrl?: string;
  mainLogoUrl?: string; // Logo displayed in the header, if put to "", will hide the logo
  titles?: Record<Routes, string>; // Header titles
  internalSameChainSwapAllowed?: boolean; // Will display a message indicating that the swap is possible on the website
  hideAnimations?: boolean;
  preferDex?: DexName[] | string[]; // Can select a preferred dex to route transactions, will be sent to the sdk when executing route
  advanced?: {
    shareOnTwitter?: boolean;
    disableTradeLimit?: boolean; // Will probably disappear in the future, when we remove the trade limit by default
  };
  priceImpactWarnings?: {
    warning: number;
    critical: number;
  };
  favTokens?: TokenConfig[];
  comingSoonChainIds?: any[]; // number | string chain ids. If set to [], will show all chains
  initialFromChainId?: number | string; // When widget loads
  initialToChainId?: number | string; // When widget loads
  defaultTokens?: TokenConfig[]; // When chain is changed, this allow to chose the first token that will be selected
  availableChains?: {
    source?: (number | string)[];
    destination?: (number | string)[];
  }; // If set to [] or undefined, will show all chains
  collectFees?: {
    integratorAddress: string; // The EVM address of the integrator that will receive the fee
    fee: 50; // The amount in "basis points" for the fee. 50 = 0.05%. there is currently soft limit of 1% fee allowed for each tx.
  };
}


// More detail about what is inside style
export interface ConfigTheme {
  neutralContent?: ColorType; // Neutral text color
  baseContent?: ColorType; // Main text color
  base100?: ColorType; // Background for chain and token dropdowns and secondary buttons
  base200?: ColorType; // "From" section background and "Settings" section background
  base300?: ColorType; // "To" section background and main widget background on all other views
  error?: ColorType; // Errors (usually red)
  warning?: ColorType; // Warning (usually orange)
  primary?: ColorType; // Background color for primary buttons
  secondary?: ColorType; // Hover background for secondary buttons
  secondaryContent?: ColorType; // Hover content for secondary buttons
  secondaryFocus?: ColorType; // Button background color for chains and tokens dropdowns
  neutral?: ColorType; // Text with less visibility (price balance)
  success?: ColorType; // Usually green
  roundedBtn?: string; // rem or px
  roundedBox?: string; // rem or px
  roundedDropDown?: string; // rem or px
  displayDivider?: boolean; // displays a divider between the "from and "to" section
  advanced?: {
    transparentWidget?: boolean; // When "true", the widget becomes slightly transparent
  };
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/old-v2-documentation-deprecated/add-a-widget/widget/customization-guide/configuration-types.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.