# `Pluggy.Connect.Live`
[🔗](https://github.com/fellipessanha/pluggy_ai_ex/blob/main/lib/pluggy/connect/live.ex#L2)

Function component for the Pluggy Connect widget in Phoenix LiveView.

Renders the Pluggy Connect widget inside a LiveView. When the user
completes the connection flow, a `"pluggy:connected"` event is pushed
to the parent LiveView.

## Usage

In your LiveView template:

    <Pluggy.Connect.Live.connect_widget
      id="pluggy-connect"
      connect_token={@connect_token}
    />

In your LiveView:

    def handle_event("pluggy:connected", item_data, socket) do
      # item_data contains the connected item
      {:noreply, assign(socket, :item, item_data)}
    end

### Resolving a token from a client

Use `Pluggy.Client.connect_token/1` in your LiveView to generate the
token before passing it to the component:

    def mount(_params, _session, socket) do
      {:ok, client} = Pluggy.Client.new("id", "secret")
      {:ok, token} = Pluggy.Client.connect_token(client)
      {:ok, assign(socket, :connect_token, token)}
    end

On the client side, add the hook to your LiveSocket:

    import { createPluggyConnectHook } from "pluggy_ai/priv/static/pluggy_connect_hook.js"

    let liveSocket = new LiveSocket("/live", Socket, {
      hooks: { PluggyConnect: createPluggyConnectHook() }
    })

Requires the `:phoenix_live_view` dependency.

# `connect_widget`

Renders the Pluggy Connect widget container.

## Attributes

  * `:id` (required) — unique DOM element ID
  * `:connect_token` (required) — the connect token from `Pluggy.Client.connect_token/2`
  * `:include_sandbox` — whether to show sandbox connectors (default `false`)

## Attributes

* `id` (`:string`) (required)
* `connect_token` (`:string`) (required)
* `include_sandbox` (`:boolean`) - Defaults to `false`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*