Book a Demo

EUWA Wrapper-interface

De EUWA Wrapper Interface (hieronder ook wrapper genoemd) voorziet in een enkel punt van ingang en communicatie voor de End User Web Applications (EUWA). Het stelt de ontwikkelaars in staat om de EUWA snel te starten en met hen te communiceren, zonder het laden van de applicaties te beheren, bijv. als u chat wilt starten met een aangepaste knop of configuratie/variabelen wilt toevoegen (run-time) vanaf uw website.

Het pakket is gepubliceerd in ons publiek NPM Register als @puzzel/euwa-wrapper @puzzel/euwa-wrapper

Koppel

declare interface Config { customerKey: string, configId: string } declare interface Options { settings: ApplicationSettings, hooks: Hooks } declare interface ApplicationList { [app: string]: string } declare interface Hooks { [hook: string]: Function } declare interface ApplicationBridge { api: ApplicationAPI, publish: (event: string, ...data: any) => void, subscribe: (event: string, callback: Function) => void, } declare interface ApplicationSettings { [app: string]: object } declare interface ApplicationAPI { [method: string]: Function } declare class EUWA { static APPS: ApplicationList constructor({customerKey, configId}: Config, {settings, hooks}: Options); getApplication(id: string): Promise; getApplicationBeforeLoad(id: string): ApplicationBridge; }

Verbinding maken met het NPM-register

Een .npmrc bestand moet in uw project of op gebruikersniveau worden gemaakt. Lees meer over .npmrc op https://docs.npmjs.com/cli/v6/configureren-npm/npmrc

De volgende regels moeten worden toegevoegd:

@puzzel:registry=https://puzzel.pkgs.visualstudio.com/public/_packaging/main/npm/registry/ always-auth=true

Basisgebruik

Het basisgebruik laadt de EUWA , met configuratie ingesteld van Puzzel's Administration Portal.

import { EUWA } from '@puzzel/euwa-wrapper'; new EUWA({ configId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', customerKey: 123456 });

API-gebruik

Het instantiëren van de EUWA klasse zal een eenvoudige API teruggeven, die het mogelijk maakt toegang te verkrijgen tot elke End-User Web Application context.

import {EUWA} from '@puzzel/euwa-wrapper'; const euwa = new EUWA({ configId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', customerKey: 123456 }); // Subscribe to click event on your start button document.querySelector('#your-start-button').addEventListener('click', async () => { // Wait for the EUWA loader to run await euwa.load(); // Get the chat application context const chat = euwa.getApplication(EUWA.APPS.CHAT); // Use the Chat's API to retrieve it's state const state = chat.api.getState(); // Start a chat, if the user is not already in session if (!state.isConnected) { chat.api.startChat(); } });

Variabelen toevoegen

U kunt systeemvariabelen en aangepaste variabelen toevoegen en wijzigen van de website naar de chatsessie.

import {EUWA} from '@puzzel/euwa-wrapper'; const euwa = new EUWA({ configId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', customerKey: 123456 }); (async () => { // Wait for the EUWA loader to run await euwa.load(); // Get the chat application context const chat = euwa.getApplication(EUWA.APPS.CHAT); // Update some system variables chat.api.updateSystemVariables({ enteredFormName: 'James Bond', enteredChatId: 'bond@mail.mi6.co.uk', enteredFormIssue: 'I need a new mission, please.', selectedQueueKey: 'q_cookies_problems', timeId2Map: 'cookiesQueueWorkingTime' }); // Update or set some custom variables chat.api.updateVariables({ NewVariable: 'Some Value' }); })();

Haken gebruiken

onBeforeLoad
Hierdoor kunt u zich abonneren op evenementen of andere acties uitvoeren, voordat de applicaties worden geladen. Omdat de API's van de verschillende applicaties echter door de applicatie zelf worden gedefinieerd, zullen ze niet beschikbaar zijn - alleen de publish/subscribe-interface is beschikbaar.

De EUWA’s ‘Get Application Before Load’-methode is speciaal ontworpen om te worden gebruikt met specifiek deze hook. Deze zal niet wachten op het laden van de applicatie en zal de basis communicatie interface - events - teruggeven.

import {EUWA} from '@puzzel/euwa-wrapper'; const euwa = new EUWA({ configId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', customerKey: 123456 }, { hooks: { // All hooks accept functions onBeforeLoad: subscribeToChatInit } }); function subscribeToChatInit() { // Get the Chat's event interface const chat = euwa.getApplicationBeforeLoad(EUWA.APPS.CHAT); // Subscribe to chatInit* event chat.subscribe('chatInit', data => { console.log('Chat Init Data:', data); }); }

* Een volledige lijst met evenementen is te vinden in ons Chat Front End API-artikel.

Instellingen overschrijven

import {EUWA} from '@puzzel/euwa-wrapper'; const euwa = new EUWA({ configId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', customerKey: 123456 }, { settings: { // Application name as first-level property [EUWA.APPS.CHAT]: { // Properties names as listed in Chat Admin showForm: false } } });

Download as PDF

Back to Top