Dynamic tags

11min
Serviceform dynamic tags

With Serviceform you have the ability to add context to your chatbot from the website that you are on. For example you can add hidden fields to your submission that will be sent to your backend integration, you can pick up images to show in the bot, you can also show text based on the context.

Example of this would be a car listing page, where in the chatbot you can use the car name to improve conversion, or a real estate listing page where you show agents name and send the email dynamically to the right agent.
Available dynamic tags:
1. Generic dynamic tags
Used for any type of text or HTML from the site to display in the chatbot. Goes up to 12.
In Website:
JS
window.serviceChatDynamicTag1 = "John";
window.serviceChatDynamicTag2 = "10 000€";
window.serviceChatDynamicTag1 = "John";
window.serviceChatDynamicTag2 = "10 000€";
﻿
In builder: 

Hi my name is #dynamicTag1. This price is #dynamicTag2.

2. Email receiver dynamic tag
Used to send the lead to a certain email.
In Website:
JS
window.serviceChatDynamicEmail = "john@doe.com";
window.serviceChatDynamicEmail = "john@doe.com";
﻿
This will send copy of the lead to john@doe.com as an email. You can also add a comma separated list.

3. Agent image
Change agent image dynamically.
In Website:
JS
window.sfDynamicServiceChatImage = "https://i.ytimg.com/vi/Bor5lkRyeGo/mqdefault.jpg";
window.sfDynamicServiceChatImage = "https://i.ytimg.com/vi/Bor5lkRyeGo/mqdefault.jpg";
﻿
﻿
This will change the agent image on the chatbot.

4. Webhook

This will trigger a webhook from the backend to the selected URL. The webhook will contain the whole dataset of the submission.
In Website:
JS
window.serviceChatDynamicWebhook = "https://example.com/api";
window.serviceChatDynamicWebhook = "https://example.com/api";
﻿
﻿
5. Calendly

This will replace all calendly URLs of the chatbot with a dynamic calendly url taken from the page.
In Website:
JS
window.serviceChatDynamicWebhook = "https://calendly.com/jarkko-oksanen";
window.serviceChatDynamicWebhook = "https://calendly.com/jarkko-oksanen";
﻿
﻿
How to get the data from the website
﻿
This is done with JavaScript and in the Serviceform configurator should be placed as a rule before loading of the chatbot.Examples are based on this: https://www.huom.fi/jaana-sippolaWhat you need to do is to find a specific selector and then add it to the dynamic tag that you want. For example:// Getting a generic tag. For example the name of an agent.var nameElement = document.querySelector('h1');
JS
  if(nameElement){
    window.serviceChatDynamicTag1 = hombre.textContent;
  }
  if(nameElement){
    window.serviceChatDynamicTag1 = hombre.textContent;
  }
﻿
Getting an email tag
// Helper function to get email from a generic piece of text. Make sure to change regexp url format. 
JS
 function extractEmails(text) {
    var mails = text.match(/([a-zA-Z0-9._-]+@email.com+)/gi);
    if (mails) {
      var dynamicMail = mails[0];
      return dynamicMail;
    }
  }

  var email = document.querySelector('.ds-agent--left');
  if (email) {
    var text = email.textContent;
    var dynamicEmail = extractEmails(text);
    window.serviceChatDynamicEmail = dynamicEmail;
  }
 function extractEmails(text) {
    var mails = text.match(/([a-zA-Z0-9._-]+@email.com+)/gi);
    if (mails) {
      var dynamicMail = mails[0];
      return dynamicMail;
    }
  }

  var email = document.querySelector('.ds-agent--left');
  if (email) {
    var text = email.textContent;
    var dynamicEmail = extractEmails(text);
    window.serviceChatDynamicEmail = dynamicEmail;
  }
﻿
﻿
Getting an image
﻿
Generic use cases are getting image from SRC, background or before lazy load works. This example is for a lazy load.
JS
 
  var image = document.querySelector('.field--agent-image img');
  if (image) {
    window.sfDynamicServiceChatImage = image.src;
  }

// If page has lazy loading, this will vary.
  var image = document.querySelector('.field--agent-image img');
  if (image) {
    window.sfDynamicServiceChatImage = image.getAttribute("data-echo") ;
  }

 
  var image = document.querySelector('.field--agent-image img');
  if (image) {
    window.sfDynamicServiceChatImage = image.src;
  }

// If page has lazy loading, this will vary.
  var image = document.querySelector('.field--agent-image img');
  if (image) {
    window.sfDynamicServiceChatImage = image.getAttribute("data-echo") ;
  }
﻿



﻿