Une intégration par un développeur front sera nécessaire pour installer le tag dans une iFrame et initialiser nos outils (web sdk et boutons personnalisés).

1. Prérequis techniques

Une page html hébergée sur un site différent (mais sur le même domaine de premier niveau),
Un canal de communication entre les deux pages, pour gérer la navigation et le positionnement et la taille de l'iframe.

2. Périmètre fonctionnel

✅ Je peux

Accéder aux fonctionnalités d’affichage des notifications de la chatbox,
Garder une continuité de la conversation sans avoir à accéder aux données privées ou confidentielles de la page principale.

❌ Je ne peux pas

Créer une règle de ciblage basée sur l'origine du visiteur (règle de ciblage "Informations sur le visiteur - provient de ce site web")
Créer une règle de ciblage basée sur la taille de la fenêtre (règle de ciblage "Informations sur le visiteur - largeur de la fenêtre du navigateur" et "Informations sur le visiteur - hauteur de la fenêtre du navigateur")
Utiliser les fonctionnalités Mirroring / co-browsing
Proposer une expérience vidéo
Proposer une expérience d'appel

3. Implémentez le boxed tag

Installez la librairie npm dans votre projet

npm i @iadvize-oss/boxed-tag

Créez le script de l'iframe

Créez un fichier js qui importera le script iframe. Puis appelez initIAdvizeIframe pour écouter les messages de l'hôte. L'appel à initIAdvizeIframe est fourni avec 2 arguments :

sid : your iAdvize sid.
iAdvizePlatform : the iadvize platform (default: ha).

import { initIAdvizeIframe } from '@iadvize-oss/boxed-tag';
initIAdvizeIframe(<sid>, <iAdvizePlatform>);

Ajout d'une iframe

Ajoutez une iframe sur la page principale de votre site.

Ajoutez le script host sur la page principale de votre site

Créez un fichier js avec l'import de la librairie host. Puis appelez initIAdvizeHost pour écouter les messages de l'iframe.

import { initIAdvizeHost } from '@iadvize-oss/boxed-tag' ;
initIAdvizeHost('myIframeId');

4. Communication entre l'iframe et l'hôte, et inversement

De l'iframe à l'hôte

Envoi d'un message de l'iframe isolée vers la fenêtre de l'hôte. Utilisez l'iAdvizeInterface pour ajouter des callbacks, qui seront gérés une fois que la balise iAdvize sera chargée.

window.iAdvizeInterface.push(function () {
window.parent.postMessage({ foo: 'bar' });
});

Réception du message sur la page principale de l'hôte

window.addEventListener('message', (e) => {
if (e.data.foo) {
// Do something with the data sent
}
});

De l'hôte à l'iframe

Envoi d'un message de la fenêtre hôte à l'iframe isolée.

const iAdvizeSandbox = document.getElementById('myIframeId');

iAdvizeSandbox.onload = function () {
iAdvizeSandbox.contentWindow.postMessage({ foo: 'bar' }, '*');
};

Réception du message sur l'iframe

window.addEventListener('message', ({ data: { foo } }) => {
// Do something with the data sent
});

Appeler les méthodes du SDK Web à partir de l'hôte

Les méthodes du SDK Web ne peuvent pas être appelées à partir du contexte de l'hôte parce que la balise iAdvize est isolée dans l'iframe. Nous devons donc indiquer à l'iframe ce que nous voulons appeler.

Après avoir appelé initIAdvizeHost, un objet iAdvizeBoxedInterface est disponible dans le contexte de la fenêtre hôte.

Cet objet envoie le nom de la méthode et les arguments à l'iframe, qui appellera le SDK web. Les méthodes activate et get peuvent renvoyer une valeur à l'hôte : pour la récupérer, ajoutez un window.addEventListener("message") et vérifiez la propriété e.data.method pour reconnaître la méthode appelée.

Navigate

// Web SDK navigate
window.iAdvizeBoxedInterface.push({
method: 'navigate',
args: [window.location.href],
});

Activate

L'hôte peut écouter le résultat de l'appel activate. Pour une authentification anonyme :

// Web SDK activate anonymous
window.iAdvizeBoxedInterface.push({
method:'activate',
args: { authenticationOption: { type: 'ANONYMOUS' },
},
});

// Listen to activate result
window.addEventListener('message', ({ data: { method, activation } }) => {
if (method === 'activate') {
console.log(activation); // activation return object : success or failure
}
});

Pour une authentification sécurisée :

Le jeton JWE doit être généré du côté de l'hôte et envoyé à l'iframe.
L'hôte doit écouter un message get-activate-auth-token initié par l'iframe.
Il appelle ensuite l'API de votre backend pour obtenir le jeton JWE, puis envoyer le jeton à l'iframe sous la forme d'un message set-activate-auth-token.
Le message get-activate-auth-token permet à l'iframe de demander un rafraîchissement du jeton si nécessaire.

Exemple de mise en œuvre de l'authentification sécurisée :

// Web SDK activate secured auth
const getJweToken = Promise.resolve('myJWEToken');// your backend logic to generate a JWE

window.iAdvizeBoxedInterface.push({
method:'activate',
args: {
authenticationOption: {
type: 'SECURED_AUTHENTICATION',
}, },
});

// Listen to activate result
window.addEventListener('message', ({ data: { method, activation } }) => {
// Handle authentication token
if (method === 'get-activate-auth-token') {
getJweToken().then((token) =>
window.iAdvizeBoxedInterface.push({ method: 'set-activate-auth-token',
args: `${token}`,
}),
);
}
if (method === 'activate') {
console.log(activation); // activation return object : success or failure
}
});

Logout

L'hôte peut écouter le résultat de l'appel de logout. Exemple de mise en œuvre :

// Web SDK logout
window.iAdvizeBoxedInterface.push({
method: 'logout',
});

// Listen to logout
window.addEventListener('message', ({ data: { method } }) => {
if (method === 'logout') {
// Do something after logout
}
});

L'hôte peut écouter le résultat de l'appel on. Exemple de mise en œuvre :

// Web SDK on
window.iAdvizeBoxedInterface.push({
method: 'on',
args: ['visitor:cookiesConsentChanged'],
});

// Listen to cookiesConsentChanged result
window.addEventListener('message', ({ data: { method, args, value } }) => {
if (method === 'on' && args.includes('visitor:cookiesConsentChanged')){
console.log(value); // cookiesConsentChanged value
}
});

Off

// Web SDK off
window.iAdvizeBoxedInterface.push({
method: 'off',
args: ['visitor:cookiesConsentChanged'],
});

Set

### Set // Web SDK set
window.iAdvizeBoxedInterface.push({
method: 'set',
args:['visitor:GDPRConsent', true],
});

Get

L'hôte peut écouter le résultat de l'appel get. Exemple de mise en œuvre :

// Web SDK get
window.iAdvizeBoxedInterface.push({
method: 'get',
args: ['visitor:cookiesConsent'],
});

// Listen to cookiesConsent get
window.addEventListener('message', ({ data: { method,args, value } }) => {
if (method === 'get' && args.includes('visitor:cookiesConsent')) {
console.log(value); // cookiesConsent value
}
});