back to tutorials

Integrating AI Widget with Ionic Framework

Learn how to integrate the AI Widget with the Ionic Framework effectively. This guide covers embedding the widget using an iframe, managing user experience, and setting client-side functions for enhanced interactivity.

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>
User Experience Notes

You may choose to show or hide the widget using alternative methods, such as adjusting the frame's visibility, opacity, or dimensions. This approach can enhance the overall user experience.

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.