Integrating AI Widget with Ionic Framework

IONIC is a popular mobile application development framework that allows you to create hybrid mobile apps using web technologies. To embed the AI Widget in an IONIC app, you can use an iframe component.

Basic Frame Embedding

First, import the iframe module in your IONIC page:

import { Component } from '@angular/core';
import { IonContent } from '@ionic/angular';

Then, in your IONIC page template, add the iframe component:

<ion-content>
  <iframe id="chatbotkit-widget-frame" [src]="widgetUrl"></iframe>
</ion-content>

In your page component, define the widgetUrl property:

export class MyPage {
  widgetUrl = 'https://chatbotkit.com/integrations/widget/{WIDGET_ID}/frame';

  constructor() {}
}

To show the widget when a button is clicked, you can use an *ngIf directive:

<ion-content>
  <button (click)="showWidget = true">Open Widget</button>
  <iframe id="chatbotkit-widget-frame" [src]="widgetUrl" *ngIf="showWidget"></iframe>
</ion-content>

In your page component, define the showWidget property:

export class MyPage {
  widgetUrl = 'https://chatbotkit.com/integrations/widget/{WIDGET_ID}/frame';
  showWidget = false;

  constructor() {}
}

Advanced Usage

Setting Client-Side Functions

To assign client-side functions to the AI Widget in IONIC, you can use the postMessage protocol. Here's how to do it:

First, obtain a reference to the iframe element:

@ViewChild('chatbotkit-widget-frame', { static: false }) widgetFrame: ElementRef;

Define your client-side functions:

const functions = {
  getCurrentUserLocation: {
    description: 'Provides the current user location',
    parameters: {},
    result: {
      data: userLocation
    }
  }
};

Create a method to set the functions:

setFunctions(functions: any) {
  const frame = this.widgetFrame.nativeElement;

  frame.contentWindow.postMessage({
    type: 'setFunctions',
    props: {
      value: Object.entries(functions).map(([name, config]) => {
        return { ...config, name };
      })
    }
  });
}

Call the setFunctions method after the iframe has loaded:

ngAfterViewInit() {
  this.widgetFrame.nativeElement.addEventListener('load', () => {
    this.setFunctions(functions);
  });
}

Make sure to define the functions object and userLocation variable according to your app's requirements.

By following these steps, you can successfully embed the AI Widget in your IONIC app and assign client-side functions using the postMessage protocol.