> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DynamicEmbeddedWidget

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

### Summary

This component will render the signup/login UI as well as the user profile all in one on the page. It's useful as an alternative to DynamicWidget, which first renders a button that brings up the flow.

You can see this component in action on our demo: [https://demo.dynamic.xyz/](https://demo.dynamic.xyz/)

| Parameter | Type | Description |
| - | - | - |
| `background?` | `'default' \| 'none' \| 'with-border'` | Specifies what kind of background to apply, defaults to 'default'. See the background options section for the differences. |
| `className?` | `string` | Allows setting a className to the container component. Note: this does not work when [Shadow Dom](https://docs.dynamic.xyz/docs/react/using-our-ui/design-customizations/css/custom-css.md#summary) is enabled! |
| `style?` | `CSSProperties` | Allows passing explicit style to the container, such as setting a fixed height. |

### Background options

The `background` prop controls the container around the widget. Try it live on our [demo](https://demo.dynamic.xyz/).

> [tab] default
>
> A filled card with a drop shadow.
>
> ![](https://mintcdn.com/dynamic-docs/1BCvlcqA98E5Wmmq/images/widget/widget-embedded-background-default.png?fit=max\&auto=format\&n=1BCvlcqA98E5Wmmq\&q=85\&s=77e1a8aaeae2903a365198a982f85237)

> [tab] none
>
> No container, so the widget inherits the background of the page.
>
> ![](https://mintcdn.com/dynamic-docs/1BCvlcqA98E5Wmmq/images/widget/widget-embedded-background-none.png?fit=max\&auto=format\&n=1BCvlcqA98E5Wmmq\&q=85\&s=54dc5a23f9fd33f01edcef91036965fd)

> [tab] with-border
>
> A filled card with a border instead of a shadow.
>
> ![](https://mintcdn.com/dynamic-docs/1BCvlcqA98E5Wmmq/images/widget/widget-embedded-background-with-border.png?fit=max\&auto=format\&n=1BCvlcqA98E5Wmmq\&q=85\&s=b18b5f5d816bcca2328d3104d502ae41)

### Usage

```jsx theme={"system"}
import {
  DynamicEmbeddedWidget,
  DynamicContextProvider,
  useDynamicContext,
} from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";

import "./App.css";

function App() {
  const { sdkHasLoaded } = useDynamicContext();

  return (
    <div className="App">
      <DynamicContextProvider
        settings={{
          environmentId: "XXXX",
          walletConnectors: [EthereumWalletConnectors],
        }}
      >
        <div className="widget-container">
        {sdkHasLoaded ? (
            // background can be 'none', 'default' or 'with-border'
            <DynamicEmbeddedWidget background="default" />
          ) : (
            <LoadingSpinner />
          )}
        </div>
      </DynamicContextProvider>
    </div>
  );
}

export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.