# Front-end Integration Overview

Authopia’s widget has few possible options to be displayed

## Fully fledged widget

<figure><img src="https://4156879059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTlKfXpP8T7bODeyLl2u%2Fuploads%2Fr7nU7cvueavwE4w2C64N%2F2.png?alt=media&#x26;token=25f13734-d8b6-4c6b-b04f-6b86f4c462a7" alt="" width="375"><figcaption></figcaption></figure>

## Button only

<figure><img src="https://4156879059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTlKfXpP8T7bODeyLl2u%2Fuploads%2F9U4Yuxh8tAiejMWxmftH%2F3.png?alt=media&#x26;token=6bb2f49e-002f-4a25-8e55-e9149b5c2a10" 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