Framework Integration

Learn how to integrate the SDK with popular web frameworks.

React Integration

Basic JavaScript Setup

For plain JavaScript React applications, simply import the SDK:

import '@azakawcompliance/azakaw-web-sdk';

TypeScript Setup

For TypeScript React applications, you'll need to add type declarations. Create or update your global.d.ts file:

import { CustomerOnboardingWebComponent } from '@azakawcompliance/azakaw-web-sdk';
import { DetailedHTMLProps, HTMLAttributes } from 'react';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'az-customer-onboarding': DetailedHTMLProps<
        HTMLAttributes<CustomerOnboardingWebComponent>,
        CustomerOnboardingWebComponent
      >;
    }
  }
}

Implementation Example

Here's a complete example showing best practices for event handling and performance:

import React, { useCallback, useContext, useEffect, useRef } from 'react';
import '@azakawcompliance/azakaw-web-sdk';
import { SessionContext } from '../context/sessionProvider';

const Onboarding = () => {
  const ref = useRef(null);
  const { sessionId } = useContext(SessionContext);

  // Define callback outside useEffect to prevent recreation on every render
  const onOnboardingComplete = useCallback(() => {
    console.log('Completed onboarding.');
  }, []);

  useEffect(() => {
    if (!ref?.current) return;
    const azakawElemRef = ref?.current;

    azakawElemRef?.addEventListener(
      'onboardingCompleted',
      onOnboardingComplete
    );

    return () => {
      azakawElemRef?.removeEventListener(
        'onboardingCompleted',
        onOnboardingComplete
      );
    };
  }, [sessionId, onOnboardingComplete]); 

  return (
    sessionId && (
      <az-customer-onboarding
        class="az-customer-onboarding"
        session-id={sessionId}
        host-origin="http://localhost:3000"
        environment="Sandbox"
        ref={ref}
      ></az-customer-onboarding>
    )
  );
};

export default Onboarding;

Angular Integration

Setup Module

Add CUSTOM_ELEMENTS_SCHEMA in your AppModule:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component Implementation

import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import '@azakawcompliance/azakaw-web-sdk';
import { CustomerOnboardingWebComponent } from '@azakawcompliance/azakaw-web-sdk';

@Component({
  selector: 'app-root',
  template: `
    <div class="wrapper">
      <az-customer-onboarding
        #customerOnboardingElem
        session-id="your-session-id"
        host-origin="http://localhost:4201"
        environment="Sandbox"
      ></az-customer-onboarding>
    </div>
  `
})
export class AppComponent implements OnDestroy {
  @ViewChild('customerOnboardingElem')
  customerOnboardingElem!: ElementRef<CustomerOnboardingWebComponent>;

  ngAfterViewInit(): void {
    this.customerOnboardingElem?.nativeElement?.addEventListener(
      'onboardingCompleted',
      this.onOnboardingCompleted
    );
  }

  ngOnDestroy(): void {
    this.customerOnboardingElem?.nativeElement?.removeEventListener(
      'onboardingCompleted',
      this.onOnboardingCompleted
    );
  }

  private onOnboardingCompleted = () => {
    console.log('Completed onboarding');
  };
}