Integration Steps

There are several ways to integrate your Cloudpresser AI chatbot with an Angular application:

Method 1: Using index.html

The simplest approach is to add the chatbot script to your index.html file:

Get your chatbot code:
- Go to your Cloudpresser AI Chat dashboard
- Select the chatbot you want to integrate
- Click on the "View Code" or "Integration" button
- Copy the provided code snippet

Add the code to your index.html:

Open the src/index.html file in your Angular project
Add your chatbot code in the <head> section:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  
  <!-- Cloudpresser AI Chat integration -->
  <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Replace "YOUR_CHATBOT_ID" with your actual chatbot ID and update the script src URL if needed.

Method 2: Using Angular's Renderer2

For more control, you can dynamically add the script using Angular's Renderer2:

import { Component, Renderer2, Inject, OnInit, OnDestroy } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private script: HTMLScriptElement | null = null;

  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit() {
    // Get the integration code
    const integrationCode = <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>;
    
    // Parse the integration code to get attributes
    const parser = new DOMParser();
    const doc = parser.parseFromString(integrationCode, 'text/html');
    const scriptEl = doc.querySelector('script');
    
    this.script = this.renderer.createElement('script');
    this.script.src = scriptEl.src;
    this.script.setAttribute('data-chatbot-id', scriptEl.getAttribute('data-chatbot-id'));
    this.script.async = true;
    
    this.renderer.appendChild(this.document.head, this.script);
  }

  ngOnDestroy() {
    // Clean up when component is destroyed
    if (this.script && this.document.head.contains(this.script)) {
      this.renderer.removeChild(this.document.head, this.script);
    }
  }
}

Method 3: Using Angular's Meta and Title Services

For Angular applications that use server-side rendering (SSR) with Angular Universal:

Create a service to manage the script:

// chatbot.service.ts
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class ChatbotService {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  initializeChatbot() {
    // Check if the script already exists
    if (this.document.getElementById('cloudpresser-chat-script')) {
      return;
    }

    // Get the integration code
    const integrationCode = <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>;
    
    // Parse the integration code to get attributes
    const parser = new DOMParser();
    const doc = parser.parseFromString(integrationCode, 'text/html');
    const scriptEl = doc.querySelector('script');
    
    const script = this.document.createElement('script');
    script.id = 'cloudpresser-chat-script';
    script.src = scriptEl.src;
    script.setAttribute('data-chatbot-id', scriptEl.getAttribute('data-chatbot-id'));
    script.async = true;
    
    this.document.head.appendChild(script);
  }
}

Use the service in your app component:

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { ChatbotService } from './chatbot.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private chatbotService: ChatbotService) {}

  ngOnInit() {
    this.chatbotService.initializeChatbot();
  }
}

Tip: If you're using Angular Universal for server-side rendering, make sure to check if the code is running in a browser environment before adding the script:

if (isPlatformBrowser(this.platformId)) {
  // Add script here
}

Angular Version Considerations

Angular 9+

For Angular 9 and newer, the Renderer2 approach is recommended for dynamically adding scripts.

Angular Universal (SSR)

If you're using Angular Universal for server-side rendering, make sure to check if the code is running in a browser environment using isPlatformBrowser from @angular/common.

Troubleshooting

Chatbot not appearing in the app

Check the browser console for any errors. Ensure the script is being added to the DOM correctly and that the chatbot ID is correct.

Script loading multiple times

If using a service or component to add the script, ensure you're checking if the script already exists before adding it again.

Issues with Angular routing

The chatbot should persist across route changes. If it disappears, ensure you're adding the script at the application root level, not in individual route components.

Need Help?

If you're experiencing issues with the Angular integration, please contact our support team at [email protected].

Angular Integration Guide