# Configuring Content

## Squid Widget: Configuring Content Guide

This guide explains how to customize various content elements of the Squid Widget, including the logo, title headings, and animations.

### Changing the Logo

You can set a custom logo for your widget using the `mainLogoUrl` property:

```jsx
<SquidWidget
  config={{
    mainLogoUrl: "https://your-domain.com/path-to-your-logo.png"
  }}
/>
```

**Notes:**

* Recommended logo dimensions are 36px x 36px.
* If this field is empty (`""`), the logo in the top left corner of the widget will be invisible.
* Ensure the image URL is accessible and loads quickly for the best user experience.

### Customizing Title Headings

You can customize the text for various sections of the widget using the `titles` property:

```jsx
<SquidWidget
  config={{
    titles: {
      swap: "Convert",
      settings: "Settings",
      wallets: "Wallets",
      tokens: "Tokens",
      chains: "Networks",
      history: "Transaction History",
      transaction: "Transaction Details",
      destination: "Destination Address",
    }
  }}
/>
```

**Available title customizations:**

* `swap`: Main action button (default: "Swap")
* `settings`: Settings page title
* `wallets`: Wallets selection page title
* `tokens`: Token selection page title
* `chains`: Chain (network) selection page title
* `history`: Transaction history page title
* `transaction`: Transaction details page title
* `destination`: Label for destination address input

**Note:** If you set any of these strings to an empty value (`""`), the corresponding title will be invisible.

### Managing Animations

The Squid Widget includes custom Lottie animations by default. You can choose to hide these animations:

```jsx
<SquidWidget
  config={{
    hideAnimations: true
  }}
/>
```

* Set `hideAnimations` to `true` to disable all custom animations.
* Set `hideAnimations` to `false` (default) to keep the animations enabled.

### Best Practices

1. **Consistency:** Ensure that your custom content aligns with your brand and the overall user experience of your application.
2. **Localization:** Consider providing localized versions of titles if your application supports multiple languages.
3. **Performance:** If using a custom logo, optimize the image for web to ensure fast loading times.
4. **Accessibility:** When customizing text, maintain clear and descriptive labels to support all users, including those using screen readers.

### Full Example

Here's an example that combines all of these content configurations:

```jsx
import { SquidWidget } from '@0xsquid/widget';

function App() {
  return (
    <SquidWidget
      config={{
        mainLogoUrl: "https://your-domain.com/your-logo.png",
        titles: {
          swap: "Transfer",
          settings: "Preferences",
          wallets: "Connect Wallet",
          tokens: "Select Token",
          chains: "Choose Network",
          history: "Past Transfers",
          transaction: "Transfer Details",
          destination: "Recipient Address",
        },
        hideAnimations: false,
        // ... other configuration options
      }}
    />
  );
}

export default App;
```


---

# 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/widget-integration/add-a-widget/widget/customization-guide/configuring-content.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.