Speaker 0: So slide it, the actual time.

Speaker 1: Actually, I’m gonna move my camera.

Speaker 0: Hello, everybody. Welcome to day two or day one of the MarDreamin Conference. If you might have joined us yesterday for some workshops, unfortunately, the tornado siren is going off outside, not because there is a tornado, but because they test it all the time. So if you can hear that, I’m sorry. Um, but welcome. We’re happy to have you here. Um, I’m gonna be moderating the session today. My name is Gray Idle. Uh, I am based in Birmingham, Alabama. And then we have Adam Erstel leading the call today. I don’t know if you can hear that, but it is very loud. Uh, but we’re gonna be talking about multi language account engagement forms today with Adam. Make sure that you, uh, are asking your questions in the chat, ideally in the q and a section. Um, I’m gonna be posting a few housekeeping notes in the chat here in a second, uh, but these sessions will be recorded and they’ll be available after the event so so that you can go in and make sure that you access all of these recordings. Adam, you can go ahead and go to the next slide, please. I do wanna take a second to thank our incredible sponsors. You may have seen us talk about this on other sessions you’ve attended, uh, but we are very grateful for all of the people who’ve supported the MarDream event. Um, I’m seeing a lot of people hopping in here. That’s great. Hello from Oxford, Mississippi, uh, but also a Tuscaloosa native. Awesome. Um, alright, Adam. Let’s hop to the next slide here. Oh, and then I’m gonna turn this over to Adam to walk through our agenda, but then I will be monitoring the chat. So if you have any questions, please feel free to, uh, share them there, and we’ll follow-up and make sure that they’re addressed. Thank you.

Speaker 1: Alright. Thanks, Gray. Welcome, everybody. Hope the, uh, keynote was educational and fun for you. Um, today, we’re gonna talk about multilanguage forms in account engagements, And I’m gonna just briefly talk about some of the current approaches that we’ve seen out there today, some of the challenges that we that we have with those current approaches. I’m not gonna try to dwell too much on those, and I wanna try to focus on what a different solution might look like. Um, gonna demo do a couple little demos, one of the front end, so to speak, user experience, and, hopefully, we have some time to dig into the code. I don’t know if it’s too early for for a code session, but we’re gonna do it anyways. Alright. So let’s get going. One of the most popular ways to approach the multilingual form is to have dynamic content in account engagement. Relying on a a custom field that you might have captured the language earlier, and then, you know, you’ll include it in all the forms. Um, you’ll have layout templates and forms for each language. You’ll have dynamic content which figures out which form it should render. And then, you know, we’ll check out the at the end of the, you know, gathering the information from the forms if it’s a short period of time. We have to look at all of the form performance for each language. Looking at what that might, you know, see inside account engagement, you’ll actually have, you know, a Spanish form, a French form, and an English form. When you’re looking at the actual dynamic content, right, you might embed your your iframe code here. And, you know, for those who work with dynamic content to lock in account engagement, you know, when you’re looking at the actual screen here, it’s you don’t really get any previews. You don’t get anything helpful. Right? You have to dig straight into the HTML. And there isn’t really a whole lot of guidance or help showing you exactly what’s going on unless you put in some HTML comments, which is best practice, and we all do it. Right? So, um, it it can be challenging to troubleshoot, diagnose, and and all that fun things. Now from a visitor experience, right, it can be annoying, I guess, when I visit the form. Right? Because as a visitor who might be fluent in a different language, I’ll visit the page and I’ll likely get the default language because account engagement doesn’t know what language I want. Right? And then, you know, maybe I’ll try to use a pick list or a drop down to select the language that I really want, and maybe that form won’t instantly rerender in my language. Right? So it can be a little bit annoying. Um, people who are multilingual or who have different language backgrounds, you know, as sad as it is to say that they’re kinda used to this on the Internet, but it’s still not a great experience. On the marketer side, right, there’s there’s a lot of assets we have to create. We have to create all the forms, maybe we have to create a bunch of templates, dynamic content. There’s just a lot that we have to do for for every form. Reporting after the fact, right, it’s split across all of those forms. And then as time goes on, depending on what kinds of automations we want to put in place, it adds to the complexity with having, you know, engagement studio programs and automations. It just it’s it can be a big mess. So what can that look like if we take a slightly different approach? And what I’m gonna show is a single account engagement form, and it’s gonna have placeholders for the text. With this approach, we have fewer assets to create and manage. Right? We have one form. We have one layout template, and it can support as many languages as you want. Dynamic content has the limit of 25 variations. I don’t know too many companies that have 25 languages they’re trying to render. But in that situation, this different approach allows you to support like, all languages if you really wanted to. Um, the reporting and automations that I was talking about earlier, it’s all streamlined because you have a single form that’s collecting all this information. And the approach that we’re taking, it does require a little bit of JavaScript knowledge, and we’re gonna get into that really soon. So this is a an animation of the form and the experience. Right? You can see as we pick the language, all of the labels, all of the values, they instantly change, allowing someone to, you know, very quickly make the the language choice that they want. Um, filling out the form. Right. We’ll see that we get some error messaging, and those are also all instantly changed to the different languages as we complete filling out the form. The thank you message is also translated based on, you know, me wanting Spanish, but it’s I don’t know. I I think it’s a pretty cool approach to, uh, multilingual forms. The QR code on the side, if you scan with your phone or whatever, it’ll take you to this to devorg for account engagement, and you can kinda play around with it there. Alright. What does this look like inside account engagement? Here we have the form fields. We can see on the left hand side that we have placeholders. Right? Square brackets. We can see that we want to have the translation for language, first name, last name, etcetera. We can do the same thing for the submit button text, and what we do here is we put a little bit of JavaScript on the below form, which will capture the currently known prospect language, and then we we call our main JavaScript to do the translations there on line five. If we’re looking at the thank you page, right, we have thank you contents of the thank you message. And then we have very, very similar code to the one we saw earlier where we’re getting the prospect language, and we’re kicking off all of the translations. Alright. Let’s go to a little bit of a real time demo. So this is the form that we saw earlier. In the interest of time, I’m not gonna, you know, not gonna go through the whole thing, but we can see very, very quickly, like, everything changes here. We’re not doing any page refreshes or page submits. This is all instant and real time. Um, seeing in the chat here, Amy, are you able to translate the drop down values? Absolutely. And I’m gonna show that right now. This is our multi language form inside of account engagement. If I go to edit this form, we see our fields here. And if I edit this industry field, I go to our values. We see that the the value that we’re saving in account engagement when the form is submitted is the English word that we’re working with. Right? It’s gonna make the sync to Salesforce work with, you know, a restrictive pick list, which is only in one language. And for the label or the value we’re displaying in the drop down, this is where we’re gonna put our translation. I’m gonna cancel out of here. And

Speaker 0: Adam, we do have a couple other questions. I don’t know if you wanna surface these now. Yeah. Can, uh, does the code or JavaScript change if the Pardot form is embedded elsewhere? So if we use that form, for example, on our website as opposed to on, uh, Pardot landing page.

Speaker 1: Yeah. Absolutely.

Speaker 0: And then

Speaker 1: The other the other question, can the form detect the language based on locale? Yes. It does that too. And I’ll get to that very soon. So how does this work? First thing that we are leveraging here is a very common templating language called handlebars. Um, this has been used in web apps and front end development for for a while. It’s nothing new. And if I’m being honest, when account engagement announced that they had handlebars merge language, this is the first thing I thought of, and I thought it was gonna be super amazing. And then we got what we got, which works too. But how it works is, basically, we have a little bit of HTML with placeholders. Right? We’re very familiar with that with working in account engagement with HTML or even PML from before. So it should look and feel very, very familiar. We have our HTML up here. We have the values that we’re going to put in, and then at the end, we get what we’re hoping to see. Now what’s kinda cool is we can do some nested input objects. Right? So we’re we’re starting to add hierarchy to our variables. And if you’re remembering some of the account engagement recipients, right, recipient would be the outer layer, and then we have first name, last name, things like that. So it should still look and feel very familiar, a little bit dot notation. Um, taking the approach that we’re working with, right, the outer the outer thing is I 18 n, which is very short for internationalization, and then we have our variables or our placeholders, first name, last name, industry, you know, whatever we want to put in here. And one of the challenges with using the double curly braces inside of account engagement is that on the thank you page, account engagement will say, hey. You’re trying to use double curly braces. I’m thinking that that’s not a valid account engagement thing to do. So with the JavaScript that I put together, I’m like, okay. Fine. We won’t use curly braces. We’ll use square brackets. So that’s that’s kind of the pattern that we have here. As I mentioned earlier, right, you can have the placeholders as labels. So we have the two square brackets, internationalization, and then the keyword that we are, you know, making up ourselves. Now to put this together, we need to actually store all those translations somewhere. Right? There’s no magic that does any AI translating or anything like that. I mean, it could be built, but that’s outside of the scope of this talk. What we what we have for this example is all the translations are stored in a JavaScript object. Right? And it’s nested where the first layer is the language code. Right? English, French, Spanish, whatever languages you want. Then the second layer is literally the word or the the characters I 18 n. And then lastly, the third layer is each translation. And what does that actually look like? So in our in our JavaScript code, it’s gonna look something almost identical to this, but with just more keywords that we’re translating. We have our language here on lines two, eight, and 14, the I 18 n keyword just to help make things differentiate them from the other merge fields that we might be using in account engagement, and then all of the things that we wanna translate. Now for our for our demo, we have, you know, quite a few fields here, and there’s actually a couple more that I added for handling no. Not you, that not you link. But this this is what it will look like if you go and inspect the code or if we have time that I can actually show you the code. We do use JavaScript to pull this all together. And what the JavaScript does is the very first thing the JavaScript does is it replaces all those square brackets with the curly braces to make the handlebars JavaScript templating engine be happy. And that’s purely to get around account engagements validation for, you know, when you save the form. Next thing it’s gonna do is it’ll determine, you know, what language should I be rendering to the visitor who’s, you know, taking a look at this form. It’s gonna first look to see, did the prospect already tell us what language they want to to read? If they have, then obviously, we we wanna use that one. And if they haven’t, next we’re gonna say, hey. Did the form previously specify the language? Right? Handling the scenario of partially filling out the form, hitting submit, and they forgot to put their their last name in the form or any other required field or validation error. If those two scenarios don’t apply, we’re gonna say, hey. Does the browser know what language I should be using? And that’s to Amy’s was it Amy’s question earlier? Someone had asked in the chat, you know, can it use the locale for for grabbing this? And this is right where it does that. Now that we know what language we should try to render the form, then what we’re gonna do is we’re going the the JavaScript will read the HTML, and it’ll use that as the handlebars template. And then it says, hey, handlebars. I wanna apply these trans translations. And that’s that’s basically what the JavaScript does. Now where we there’s a few places where we have to put this JavaScript in order to make this all work. We need the the brains of the JavaScript, so to speak, somewhere on the page. Right? It can be the layout template. You can have it in an external file. There’s there’s a lot of ways that you can, you know, store and reuse JavaScript. So for the brains, that’s really what you wanna do. Then we’re gonna have the translations. Right? And depending on your your website and your forms, you might choose to have, you know, a big giant set of translations that handles everything, or you can choose to have form specific translations. Right? It depends on how you wanna manage all of those translations, um, and things like that. The JavaScript itself, it handles the page and the form rendering. It handles error messages. It handles the thank you page. It tries to take care of everything. Alright. So I’ve got a code here to get the, um, a QR code to actually go and get the code from the blog post that I wrote to put all this together. Um, Gray, how are we doing here for questions? Is there anything that I didn’t grab?

Speaker 0: Yeah. We’ve actually uh, we got a few here. Alright. Um, let me just start at the beginning to make sure that we’re answering them in order. Uh, Rafael said, what if there is a language not left to right, but also right to left? Have you encountered that before, Adam?

Speaker 1: I haven’t encountered that. I would I would guess that the JavaScript should handle it fine. It would be more on the page design to make sure that that’s correctly handled. Um, but, I mean, the the JavaScript is I don’t wanna say it’s open source, but we we give everyone the source. And then, you know, if there’s something that it doesn’t do well, make the changes, let me know, and I’ll see if I can incorporate it in for everybody else.

Speaker 0: Awesome. Thank you. What about the language of the landing page that that form might be hosted on? Uh, if that language was, for example, French, can it automatically associate that form with that language and display, uh, the correct multilanguage form?

Speaker 1: The JavaScript could be enhanced to take that into consideration. Absolutely.

Speaker 0: Um, okay. I’m gonna answer all these when I get to them here in just a second. Hold on one second. There was another one here. Drop down values. Yep. Maybe I think we might have answered all of them. Yes. Uh, Vera, it does work if we use, uh, iframe forms

Speaker 1: on

Speaker 0: our website. Um, that was another question that had already come up. And, yes, we we very often use forms on other sites outside of just Pardot or account engagement landing pages. There’s the Pardot for whoever called that out. Um, but, yes, it it will work that way as well.

Speaker 1: Alright. Then let’s go and actually take a look at the JavaScript code. I like that last comment, but I’m not gonna comment on it right now. Alright. Layout templates. We’re gonna go and edit this template so we can take a look at the code. Here we have the JavaScript code. Oh, I just make this bigger for everybody. Is this is this good? Hopefully, it’s not too small. If it’s still too small, I don’t know. Pipe in and chat, and we can make it bigger. This is the layout template, our account engagement layout template for the actual form. Here we have the script to the handlebars JavaScript templating engine. The next script we have is where we’re setting the languages that we support. So we have English, French, and Spanish. Next, we have the actual translations for each language. Right? So for the English language, our internationalization keys are first name, last name, blah, blah, blah. We have the same keys for French and the same keys for Spanish. And, yes, I might have used some GPT products to come up with these translations. Don’t use them blindly yourself because I don’t know these languages. Now down here, starting on line 79, this is where we have the brains of our translation I don’t wanna call it translation engine or translation code. Right? First thing that we’re gonna do is we’re going to this is the code here that converts our square brackets into curly braces. We take a look for any Pardot errors, and we will kinda handle replacing that text ourselves. Um, here starting at line 91, we we do the same thing where we say, if we detect the text, is this not you? You know, that link that you can click to clear your cookie, so to speak. Um, we have some code that handles that as well. Then what we do is we we start the actual process of taking the HTML. Excuse me. We take the actual HTML, and we turn it into a a template that we can then give to handlebars. Now we’re starting on the actual language detection. Like, what language should we try to use? So we’re gonna grab the browser language, and this uses JavaScript JavaScript API, I guess, that lets us get the technically, it’s the locale, and we’re only grabbing the first two characters. Right? So for the locale of E N underscore u S, we only really care about the e n. But if you wanted to have translations that were locale specific, you could just adjust this to not, you know, not chop it up. So we know the browser language. Right? We’re gonna see what are the allowed languages, The languages that we actually have translations for. Right? And that was earlier on. I’m gonna scroll up there. Right? We say that we support English, French, and Spanish, and this JavaScript code will take a look at and figure out, hey, if someone is Turkish. Right? We don’t support the Turkish language, so we’re gonna kinda default it to English just like you would kind of expect. So this is kinda looking at the languages and trying to figure out what, you know, what it should do, which language should it actually pick based on, you know, all of the all of the information that we have. Now that we have figured out, you know, what language should we actually render, then we can apply the translations.

Speaker 0: So we’ll

Speaker 1: take our template. We’re gonna give it all of our translations, all of the languages that we have, and then handlebars JS is going to do the actual translation for us. Then what we do is we swap out the HTML of whatever is currently rendered with the translated HTML and then a couple housekeeping things. That’s that’s basically what our JavaScript does. So, you know, there’s I don’t know how many lines of JavaScript are here. It’s a bit. One forty eight. So, like, a 120 lines, 130 lines of JavaScript, although a lot of them are the translations. Um, so if we go 80 lines of JavaScript, you know what? It’s not too bad. Um, based on some of the things that were called out in the chat here, right, we could enhance this to pull in, you know, maybe it’s a page, like, um, site map, page language, or something like that, and then we could enhance where’d that line go? We could enhance this line to, you know, prioritize in the right order, um, based on, you know, whatever whatever you think you need.

Speaker 0: We’ve got some good questions here in the chat. Um, just wanna surface these. We’ve only got a couple minutes left, so I wanna make sure we get to all of these. Uh, can different completion actions be triggered on the form based on the language, uh, you know, a specific autoresponder, um, within a or for a specific language.

Speaker 1: Yeah. That one is so with this with this approach, right, we have the language as a field on the form. Right? Anytime the form is submitted, we’re capturing the language for that person. And then what we could do in the actual form is we could have conditional completion actions that says, you know, if the form is a certain language, then send a different autoresponder. Now we do have the limitation of six conditionals in the completion actions for a form. So there’s, you know, there’s that limitation that could be, uh, challenging. But I don’t know. I would almost argue that it’s unlikely that most organizations are doing six or more translations on a form. Although I’d love to be wrong and call me out in chat.

Speaker 0: Okay. I’m gonna move on to the next one real quick. Uh, so Vera asked, uh, do I need a different layout template for each form where we’re using different fields on that form, Or can I just list all of those possible fields, uh, in one, you know and all that JavaScript on one template?

Speaker 1: Yeah. I think we could organize the JavaScript in a way where the brains is held somewhere, and then the translations are on each form. Um, it gets a it can get a little bit trickier because you have to start putting things in multiple spots, but it’s, you know, it’s just organizing JavaScript. And, you know, depending on the talents of your your team, it yeah. It’s more than possible.

Speaker 0: Okay. Two more that are kinda related. Is there a list of I 18 n keys, uh, so that they can, you know, update the code for all languages they want to support? Is that something

Speaker 1: Yeah. So this the I 18 n keys, like, these are made by you. Right? So depending on your form, which fields, etcetera, like, whatever whatever oh, I think I just broke I just broke by trying to hit the back button. That’s fun. Oh, did it come back? Nice. Alright. Right. So all of these keys, these are entirely defined by you. So the the list is whatever you choose it to be.

Speaker 0: Okay. And we got one more question. Is this JavaScript in the blog that you linked for everybody to reference?

Speaker 1: Yes. Yes.

Speaker 0: Awesome. Um, I also did just launch a survey. We’ve only got a couple seconds left here, but thank you all for joining us. You will again, uh, these will all be recorded, and you will have access to these on demand after.