> For the complete documentation index, see [llms.txt](https://developers.authopia.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.authopia.io/docs/front-end/front-end-integration-overview.md).

# Front-end Integration Overview

Authopia’s widget has few possible options to be displayed

## Fully fledged widget

<figure><img src="/files/epHAARWOx1ZxPnIAV3fX" alt="" width="375"><figcaption></figcaption></figure>

## Button only

<figure><img src="/files/7BrasPcdaWkhHwa1e1dt" alt="" width="375"><figcaption></figcaption></figure>

Its UI and translations are configurable while integrating the widget if needed.&#x20;

{% hint style="info" %}
For **local** development use **PROJECT ID** of your **Sandbox** project in the admin panel, otherwise you would need to set up an HTTPS environment and change localhost to your project's domain for the widget to work properly.
{% endhint %}

As a first step you’ll need to install the package via npm:

```shell
npm install @authopia/widget
```

Next to integrate the widget you need to put this into your frontend code:

* Load the widget component:

```javascript
import { defineCustomElements } from '@authopia/widget/loader';
import '@authopia/widget/dist/authopia-widget/authopia-widget.css';

defineCustomElements(window);
```

* Embed the widget web component

{% code overflow="wrap" %}

```html
<authopia-widget
    email="YOUR EMAIL"
    project-id="PASTE YOUR PROJECT ID HERE"
    text="Register"
/>
```

{% endcode %}

* If you want to bind to onSuccess event:

```javascript
const authopiaWidget = document.querySelector("authopia-widget")
authopiaWidget.onSuccess = function () {
  alert('success');
}
```

* If your project uses typescript you can add `global.d.ts` for better typing:

```typescript
declare namespace JSX {
  import { AuthopiaWidgetElement } from '@authopia/widget';

  interface IntrinsicElements {
    'authopia-widget': AuthopiaWidgetElement;
  }
}
```

After a successful authentication flow an ID token is returned via onSuccess method