---
title: Dynamic tags
slug: dynamic-tags
description: Learn how to enhance the functionality of your website's chatbot with Serviceform's dynamic tags. Add hidden fields, images, or text based on the context of the page using various types of tags like generic, email receiver, agent image, webhook, and Calen
docTags: 
createdAt: 2021-03-29T11:18:29.000Z
---

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:**

```javascript
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:**

```javascript
window.serviceChatDynamicEmail = "john@doe.com";
```

This will send copy of the lead to [john@doe.com](mailto\:john@doe.com) as an email. You can also add a comma separated list.


### 3. Agent image

Change agent image dynamically.

**In Website:**

```javascript
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:**

```javascript
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:**

```javascript
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');

```javascript
  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. 

```javascript
 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.

```javascript
 
  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") ;
  }

```