## Self-service portal (admin portal) quickstart

Prerequisite: Complete Frontegg authentication integration.
If you haven't integrated Frontegg login into your application, please integrate it before moving to the Admin Portal integration.

### Embedded self-service portal

Bind an app link to open the self-service portal:


```typescript
import { Component } from '@angular/core';
import { FronteggAppService } from '@frontegg/angular';

@Component({
  selector: 'show-admin-portal',
  template: '<button (click)="showAdminPortal()">Show self-service portal</button>',
})
export class ShowAdminPortalComponent {
  constructor(private fronteggAppService: FronteggAppService) { }

  showAdminPortal(): void {
    this.fronteggAppService?.showAdminPortal()
  }
}
```


```typescript
<button (click)="showAdminPortal()">Settings</button>
```

#### Hosted self-service portal

When using more than one application, it is recommended using the Hosted self-service portal which supports displaying all the relevant sections in an application context. For example, in the **Profile** section, the user will be able to see all the applications that their account is assigned to.

br
Prerequisites
The minimal SDK version that is required for this quickstart is @frontegg/angular@6.24.1

br

```typescript
import { Component } from '@angular/core';
import { FronteggAppService } from '@frontegg/angular';

@Component({
  selector: 'show-admin-portal',
  template: '<button (click)="showAdminPortal()">Settings</button>',
})
export class ShowAdminPortalComponent {
  constructor(private fronteggAppService: FronteggAppService) { }

  openHostedAdminPortal(): void {
    this.fronteggAppService?.openHostedAdminPortal()
  }
}
```


```typescript
<button (click)="openHostedAdminPortal()">Settings</button>
```

br
You are good to go! The admin portal should now be shown and you are on the part for a full self-served experience on your product.