Chatbot
Advanced

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 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 window\ servicechatdynamicemail = "john\@doe com"; this will send copy of the lead to mailto\ john\@doe com as an email you can also add a comma separated list 3\ agent image change agent image dynamically in website 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 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 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'); 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 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 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") ; }