Embedded Component

Embed Q-Flow UI components into your application

Prerequisites

To embed Q-Flow UI components into your application, you'll need a valid API Key and a Subscriber Group key.

The Embedded Component feature allows you to easily integrate Q-Flow UI components directly into your application, providing a seamless user experience without having to switch between platforms.

Embedding Options

Currently, the solution can be embedded using an iframe. We're working on expanding embedding options in future updates, so stay tuned!

Retrieve Your Embedded Token

To embed the Qala Subscriber Component, you first need to retrieve your embedded token from the API.

CURL

curl -X GET "https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token" \
       -H "x-auth-token <your-api-key>"

Vanilla JS

fetch('https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token', {
  method: 'GET',
  headers: {
    'x-auth-token': '<your-api-key>',
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

React TS

import React, { useEffect } from 'react';

const fetchSessionToken = async () => {
  const response = await fetch('https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token', {
    method: 'GET',
    headers: {
      'x-auth-token': '<your-api-key>',
    },
  });
  const data = await response.json();
  console.log(data);
};

useEffect(() => {
  fetchSessionToken();
}, []);

export default fetchSessionToken;

Angular

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiUrl = 'https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token';

  constructor(private http: HttpClient) {}

  getSessionToken(): Observable<any> {
    const headers = new HttpHeaders().set('x-auth-token', '<your-api-key>');
    return this.http.get(this.apiUrl, { headers });
  }
}

C#

using System;
using System.Net.Http;
using System.Threading.Tasks;

public class ApiClient
{
    private static readonly HttpClient client = new HttpClient();

    public static async Task GetSessionTokenAsync()
    {
        client.DefaultRequestHeaders.Add("x-auth-token", "<your-api-key>");
        var response = await client.GetAsync("https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token");
        var data = await response.Content.ReadAsStringAsync();
        Console.WriteLine(data);
    }

    static void Main(string[] args)
    {
        GetSessionTokenAsync().Wait();
    }
}

Java

import java.io.InputStreamReader;
import java.io.BufferedReader;
import java.net.HttpURLConnection;
import java.net.URL;

public class ApiClient {
    public static void main(String[] args) throws Exception {
        String apiUrl = "https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token";
        URL url = new URL(apiUrl);
        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
        connection.setRequestMethod("GET");
        connection.setRequestProperty("x-auth-token", "<your-api-key>");

        BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
        String inputLine;
        StringBuffer response = new StringBuffer();

        while ((inputLine = in.readLine()) != null) {
            response.append(inputLine);
        }
        in.close();
        System.out.println(response.toString());
    }
}

Go

package main

import (
    "fmt"
    "log"
    "net/http"
    "io/ioutil"
)

func main() {
    req, err := http.NewRequest("GET", "https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token", nil)
    if err != nil {
        log.Fatal(err)
    }

    req.Header.Add("x-auth-token", "<your-api-key>")

    resp, err := http.DefaultClient.Do(req)
    if err != nil {
        log.Fatal(err)
    }
    defer resp.Body.Close()

    body, err := ioutil.ReadAll(resp.Body)
    if err != nil {
        log.Fatal(err)
    }

    fmt.Println(string(body))
}

Python

import requests

url = "https://api.qalatech.io/v1/security/subscriber-groups/<your-subscriber-group-id>/session-token"
headers = {
    'x-auth-token': '<your-api-key>',
}

response = requests.get(url, headers=headers)
print(response.json())

Embedding the Subscriber Component

Once you've retrieved your embedded token, you can embed the Qala Subscriber Component into your application. Here's how you can do it:

HTML

<iframe
  title="Qala Embedded Subscriber"
  src="https://embedded-subscriber.qalatech.io?token=<your-embedded-token>&themeMode=<light|dark>"
  style="width: 100%; height: 100%; border: none; background-color: transparent;" />