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

# DynamicEmbeddedWidget

### 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'. Check the playground section to see the differences.                                     |
| `className?`  | `string`                               | Allows setting a className to the container component. Note: this does not work when [Shadow Dom](/design-customizations/css/custom-css#summary) is enabled! |
| `style?`      | `CSSProperties`                        | Allows passing explicit style to the container, such as setting a fixed height.                                                                              |

### Playground

See how it works live! Play with the background options to see their effect!

<iframe frameBorder="0" width="100%" height="600px" src="https://readme-embeds.dynamic.xyz/embedded-widget" />

### Usage

```jsx
import {
  DynamicEmbeddedWidget,
  DynamicContextProvider,
} from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import "./App.css";

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

export default App;
```