Applications | Guide de configuration de « Formulaire Web à ticket » sur votre site Internet – Allthings Help Center

Vous avez plusieurs possibilités pour ajouter le formulaire Web à votre site Internet.

Si vous disposez des droits « App Admin » (administrateur de l’application), allez dans les paramètres de la plateforme, cliquez sur « Omnicanaux » pour afficher l'URL du formulaire Web destiné aux demandes de locataires, puis copiez-la.

Option la plus simple: ajouter un lien

Ajouter l'URL fournie par Allthings (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId….) dans un lien sur une page déjà existante ou un élément de menu. Configurer ce lien soit pour qu'il s'ouvre directement, soit pour qu'il ouvre une pop-up (attention, certains locataires utilisent des bloqueurs de pop-ups).

Deuxième option: ajouter un bouton

Ajouter un bouton sur une page existante et lui attribuer le lien fourni par Allthings (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId….). Configurer ce lien soit pour qu'il s'ouvre directement, soit pour qu'il ouvre une fenêtre pop-up (attention, certains locataires utilisent des bloqueurs de pop-ups).

Troisième option: créer un sous-domaine

Créer/configurer un sous-domaine auprès du fournisseur de nom de domaine, par exemple Service.gerancexyz.com. Rediriger ce sous-domaine directement vers le lien fourni par Allthings (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId….).

Si d'autres options de configuration sont requises et nécessitent une vérification, nos spécialistes sont disponibles, au tarif horaire de la personne responsable de l'hébergement du site Internet chez le client.

Quatrième option: intégration avec fenêtre pop-up

Voici l'apparence de la fenêtre pop-up préconçue:

Les textes peuvent être modifiés dans le « script ».

<script type="text/javascript">
  var appId = ""
  var serviceProviderId = ""
  var title = "You have been selected for a survey"
  var subText = "We appreciate your feedback!"
  var textWithLinkRedirect = "Please click here start it now."
  var cancelRedirect = "No, thank you."

  var link = `https://service.allthings.me/s3/helpdesk?app_id=${appId}&service_provider_id=${serviceProviderId}`
  var sg_div = document.createElement("div");
  sg_div.innerHTML = `<h1>${title}</h1><p>${subText}</p><p><a href=\"${link}\">${textWithLinkRedirect}</a> </p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">${cancelRedirect}</a> `;
  sg_div.id = "sg-popup";
  sg_div.style.position = "absolute";
  sg_div.style.width = "500px";
  sg_div.style.top = "100px";
  sg_div.style.left = "400px";
  sg_div.style.backgroundColor = "#ffffff";
  sg_div.style.borderColor = "#000000";
  sg_div.style.borderStyle = "solid";
  sg_div.style.padding = "20px";
  sg_div.style.fontSize = "16px";
  document.body.appendChild(sg_div);
</script>

Pour utiliser la fenêtre pop-up, il faut localiser le fichier HTML de la page à laquelle elle doit être ajoutée. Ce fichier ressemble à peu près à ceci:

<!DOCTYPE html>
<html>
  <head>
    ...
    ...
  </head>
  <body>
    <h1>...</h1>
    <p>...</p>
       ...
  </body>
</html>

Le code ci-dessus doit ensuite être placé entre les balises <body>. Par exemple:

<!DOCTYPE html>
<html>

  <head>
    ...
    ...
  </head>
  <body>
    <script type="text/javascript">
      var appId = ""
      var serviceProviderId = ""
      var title = "You have been selected for a survey"
      var subText = "We appreciate your feedback!"
      var textWithLinkRedirect = "Please click here start it now."
      var cancelRedirect = "No, thank you."

      var link = `https://service.allthings.me/s3/helpdesk?app_id=${appId}&service_provider_id=${serviceProviderId}`
      var sg_div = document.createElement("div");
      sg_div.innerHTML = `<h1>${title}</h1><p>${subText}</p><p><a href=\"${link}\">${textWithLinkRedirect}</a> </p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">${cancelRedirect}</a> `;
      sg_div.id = "sg-popup";
      sg_div.style.position = "absolute";
      sg_div.style.width = "500px";
      sg_div.style.top = "100px";
      sg_div.style.left = "400px";
      sg_div.style.backgroundColor = "#ffffff";
      sg_div.style.borderColor = "#000000";
      sg_div.style.borderStyle = "solid";
      sg_div.style.padding = "20px";
      sg_div.style.fontSize = "16px";
      document.body.appendChild(sg_div);
    </script>

    <h1>...</h1>
    <p>...</p>
       ...
  </body>
</html>

Il faut ensuite déterminer l'ID de l'application (« appId ») et l'ID du prestataire de services (« serviceProviderId »), fournies par Allthings (https://service.allthings.me/s3/helpdesk?_privatedomain=t&appId=THISISAPPID&serviceProviderId=THISISSERVICEPROVIDERID&snc=1614860187_6040cf9b27ee78.77242420&sg_navigate=start&sglocale=fr). Regardez le lien que nous avons fourni, ces deux valeurs y sont contenues.

En rouge: l'appID, en orange, le serviceProviderID.

Ces deux valeurs doivent être ajoutées entre les guillemets dans le fichier HTML.

var appId = "VOICILAPPID"

et var serviceProviderId = "VOICILESERVICEPROVIDERID".

Les textes peuvent être facilement modifiés: il suffit d'ajouter le nouveau texte entre les guillemets sous title, subText, textWithLinkRedirect.

Cinquième option: intégration par « iframe »

Un "iframe" est un moyen d'afficher une autre page Internet ou site sur votre propre site Internet. Avec un iframe, l'utilisateur reste sur votre site mais interagit dans cette fenêtre (frame) avec l’autre site Internet.

Pour une meilleure expérience utilisateur, nous recommandons de créer un nouveau chemin de lien de votre site Web et de lui attribuer un propre fichier HTML séparé (en général, le fichier représente automatiquement un nouveau chemin). Il faut encore ajouter ce qui suit à ce fichier:

<!DOCTYPE html>
<html>
  <body style="margin:0;">

    <input type="button" onclick="window.location.replace('IHRE_WEBSEITE');" value="Home" style="margin-top: 7px;margin-left: 10px;position:absolute;z-index:1;color:#ffffff;background-color:#ff5500;font-weight: 600;font-family: Amatic SC, sans-serif !important;font-size:10px;line-height:1.4;border:none;transition: border .25s linear,color .25s linear,background-color .25s linear;border-radius: 2px;padding: 3px 5px 16px 5px;height: 15px;" />
    <iframe src="HIER-MUSS-IHR-LINK-HIN" frameborder="0" width="100%" height="100%" style="overflow:hidden;position:absolute;"></iframe>
  </body>
</html>

Remplacer VOTRE-LIEN-ICI par le lien qu'Allthings vous a fourni, VOTRE-SITE par le lien vers votre propre site Web et, le cas échéant, Home avec un mot ou un nom de votre choix.

Si l'iframe doit être intégré, autrement dit si vous ne souhaitez pas qu'il soit une page individuelle en tant que chemin, il faut alors modifier les propriétés.

<iframe src="HIER-MUSS-IHR-LINK-HIN" frameborder="0" width="calc(100vw - ANZAHL_IN_PIXEL_EINHEIT)" height="calc(100vh - ANZAHL_IN_PIXEL_EINHEIT)" style="overflow:hidden;"></iframe>

Dans certains cas, il suffit de remplacer les champs (UNITE-EN-NBRE-DE-PIXELS) par 100px, par exemple. Ce chiffre doit être ajusté en fonction de votre propre site Web. Le champ width="calc(100vw - UNITE-EN-NBRE-DE-PIXELS)" permet de modifier la largeur de l'iframe et le champ height="calc(100vh - UNITE-EN-NBRE-DE-PIXELS)" sa hauteur.

Dans certains cas, laisser width="100%" et ne modifier que height est suffisant.

Veuillez noter que d'autres éléments de votre site Internet peuvent influencer l'affichage de l'iframe.

Articles dans cette section

Articles associés