ProSights Recreate Widget Quick Start Guide

Period	Response Time
Business Hours	< 1 hour
Outside Business Hours	< 8 hours

Prerequisites

What You Need

Ensure you have:

Node 18+ and npm or pnpm
Angular 20.1+ CLI (ng version)
A GitHub Personal Access Token with read:packages scope

Setup

Install the SDK

1. Add your token to .npmrc:

.npmrc

@prosights:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT

2. Install package:

Terminal

npm install @prosights/recreate-sdk

Bootstrap

Register Widgets in `main.ts`

Import and register both the auto-render and modal web components before bootstrapping:

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { createWebComponent, Recreate, RecreateModal } from '@prosights/recreate-sdk';

// Register ProSights web components
createWebComponent(Recreate, 'sdk-recreate', ['api-key', 'base-url', 'token']); // only one of api-key or token
createWebComponent(RecreateModal, 'sdk-recreate-modal', ['is-open', 'api-key', 'base-url', 'token']); // only one of api-key or token

bootstrapApplication(App)
  .catch(err => console.error(err));

Component

Your Standalone Root Component

Make your root component standalone, include the schema, and add widget state:

src/app/app.ts

import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
export class App {
  // Widget state and config
  isRecreateModalOpen = false;
  apiKey = 'YOUR_TEST_API_KEY';
  baseUrl = 'https://your-base-url.com';

  openRecreateModal() { this.isRecreateModalOpen = true; }
  closeRecreateModal() { this.isRecreateModalOpen = false; }
}

Usage

Embed in Your Template

Auto-render the widget and trigger the modal from your template:

src/app/app.html

<sdk-recreate [attr.api-key]="apiKey" [attr.base-url]="baseUrl"></sdk-recreate>

<sdk-recreate-modal
  [attr.is-open]="isRecreateModalOpen"
  [attr.api-key]="apiKey"
  [attr.base-url]="baseUrl">
</sdk-recreate-modal>

<button (click)="openRecreateModal()">Launch Recreate</button>

ProSights Recreate Widget

What You Need

Install the SDK

Register Widgets in main.ts

Your Standalone Root Component

Embed in Your Template

Register Widgets in `main.ts`