Multilingual translations via Weglot

integrating weglot with roster provides a seamless solution for translating various elements of your ambassador program weglot helps translate the application form and campaign content in roster's ambassador portal, allowing ambassadors see content in multiple languages the integration is easy to set up, but it involves several steps, including configuring language settings, obtaining the weglot api key, and adjusting settings within roster this guide will walk you through integrating weglot with roster, ensuring your ambassador program supports multiple languages effectively video walkthrough video transcript this is a transcript from the loom video walkthrough \[00 00] hey, this is jeff at roster in this video, i'm going to show you how you can integrate weglot with roster \[00 07] weglot is an amazing solution for providing translations to websites and applications and roster has partnered with weglot to power some of our translation features \[00 18] it's a very feature rich product and definitely they offer way more than we could do if we tried to do these translations on our own \[00 25] so, it made a lot of sense to use weglot as a lot of other saas apps and platforms like roster have also done \[00 33] so, what you're going to need to do in order to use this integration is go to weglot com and you can read all about the services they offer it's possible that your company's already using it for your e commerce site, but you it's not free, it is paid \[00 51] they have some really reasonable pricing though so, you'll want to create an account if you don't already have one and then as soon as you create an account, it's going to drop you into this flow where you can create a new project \[01 02] so, i'm just going to type, um, roster translations is the project name in the website technology drop down, just scroll down and see \[01 12] select other, and then click next and it's going to bring up a page where you can configure your languages select english as the original language \[01 24] and then translated languages, you'll select whatever languages you want to translate into you can select multiple and this is where the pricing tiers might limit what, how many languages you want \[01 36] so as you can provide and then click next and then in the domain url, just type in roster link and then just simply click next might take a few minutes to configure \[01 58] and then as soon as the next step shows up that says connect to, connect wiglot to your website, there's three little collapsible sections and the third collapsible section says skip this step \[02 12] so open up that section and then there is a link that says skip this step click that link alright and, uh, and in this next step that's titled add wiglot snippet, it's going to show a little bit of javascript code and inside of that javascript code, there's a line that says api underscore key and \[02 38] then it has a value in single quotes that starts with wg underscore select that full value without including the little single quotes and then click copy to copy that to your clipboard and then actually let's see here this is a kind of a funny step where they don't enable the next button until remember \[03 13] why they do that exactly so click copy and then what we're gonna do is we're actually gonna go over to your roster account so go ahead and click on the programs list roster, so on the left navigation, you'll select programs and then click on the settings button for the program for which you want to, \[03 37] uhm, add translations and then once the settings opens up, click on the integrations tab and then you'll see that there is a input field, a section called translation via weglot and there's a field to paste in your weglot api key, so go ahead and click paste and then that will save, and then once that \[03 59] shows up, once that api key has been pasted in, two additional, uh, fields are enabled in that translation via weglot section \[04 07] the first one is application form and the second one is campaigns so if you want to translate, uhm, some of the copy that you provide to your ambassadors but have it also show up in other languages, then you can also enable that \[04 29] so with both of those features enabled, uhm, i'm ready now to start testing this out let me see if this is enabled yet \[04 37] this is the weirdest part about the weglot is they don't let you pass this until they've actually checked so i think what we need to do, uhm, to get past it, since i've pasted the key in and i have enabled the application form, what we're going to do is actually go view the application form \[04 53] so to do that, i'm going to click on, within the program settings, i'm going to click on the recruitment tab and then in the application form section at the top, i'm going to click the little drop down arrow on the copy button and i'm going to select copy form link and then i'm going to open it up a \[05 13] new browser tab and i'm going to paste in the link to my, this program's hosted form and what that does is it loads up the application form as you would expect, but it also includes my weedlot api key that we pasted into the integrations tab \[05 31] and now you can see here that there is a little dialogue on the bottom right that says english and if i click on it, i can switch to spanish \[05 41] and by doing that, weedlot instantly provides a translation from the english into spanish, which is super cool and i believe that's all that needs to happen in order for, okay, cool \[05 54] so now if we go back to the browser tab that had the weaklot project set up as soon as assuming you were able to view your application form, it should then auto complete that project setup and you should get a little page that says setup finished, go to my translations \[06 11] so click on the button that says go to my translations and there's just two last steps that we need to take care of with inside of this weaglot projects setting \[06 25] so we're going to scroll down and in the left hand navigation under the settings section, click on general, uh, no, excuse me, click on language switcher and, okay, i might have lied \[06 42] click on the general link oh, there it is okay okay, so with the general settings open there's a card that says auto switch with a toggle \[06 52] so toggle that on and what that enables is that when a customer or when an applicant or an ambassador comes to one of your pages, it will try to automatically detect their language based on the browser \[07 06] and if that's one of the supported languages, it will automatically switch to it so given that i have enabled spanish, for this project, if somebody whose browser locale is set to spanish views that application form, then it will automatically display the application form in spanish \[07 26] they don't have to go to that little language switcher drop down, click on it and make the switch manually it will happen automatically \[07 33] okay, so that's the first of two changes we need to make and the second chain the second change is if you click back in that settings in the left navigation, uhm, we want to click on app settings, and in app settings there's a card that says dynamic elements \[07 54] we want to click the button that says add dynamic and in the selector input field type body, and in the description type ambassador portal \[08 08] okay, and then click save and what this will allow to happen is because roster's ambassador portal is a, uhm, what's called a single page application, meaning every time you click a link it doesn't like refresh the whole page it just dynamically changes the content \[08 25] this will allow weglot to detect that the, uhm, page has changed when somebody clicks a link and will allow then the translation to happen \[08 34] so, a little bit of a, a, technical detail there, but now we should be completely set up so, in a, uhm, if i come back to the browser tab that has roster open and i will uh, i click now on the integrations tab \[08 53] i just want to remind you that in the translation via weglot, you can decide if you want to translate the application form and or the campaign copy that you enter into a campaign \[09 05] and we fully expect in the future to have lots of additional content available for translation if there's content in the ambassador experience that you would like to see translated, but you don't see it here, send us an email to support at gitroster com and we'll do our best to expand the translation \[09 21] capabilities there just to date hasn't been a significant amount of demand possibly because, uhm, some browsers do a really good job of just automatically translating content for users when it's not in their native language \[09 36] but let us know for sure but again, you don't have to turn back both of these on for a project \[09 41] uhm, you can just turn on the application form, excuse me for a program, you can turn on the application form and ignore this one or you can not enable this and, uhm, just do the campaigns \[09 51] so let's just, before we wrap this up, let's come back to the tab where you have weglot open and i just want to show you what, what it looks like \[10 01] so if i click on languages in the left hand navigation, then it shows the translations that i've enabled for this project \[10 10] so for this project, i have english as the default language and spanish as the language we're translating into and because i had the, uh, the, excuse me, the application form already viewed and it already provided those translations, it shows me here how, how many words have been translated \[10 28] so if i click on the english to spanish translation card, then it's going to bring up this really nice editor where it will show every single set of words that were translated and what values they were translated to \[10 45] and it will show underneath each one of these that it was an automatic translation what's really cool about weglot is that you, you or your team can come in here and you can change any of these translations that you want \[10 57] you can also remove translations so if you don't want this powered by, for example, to be translated, you can just delete that translation \[11 04] you can also use this little mark as reviewed button to indicate to your team that this translation has been reviewed \[11 10] there's a lot of flexibility in providing in managing the translations across this application form experience and in the context of a campaign \[11 20] so, okay, and then since we looked at the application form, let's go ahead and just look at a campaign and see how that translation works \[11 28] so i'm going to come to, this is the ambassador program that i added the weglot key to so i'm going to come into my campaigns and i'm going to open up the welcome campaign \[11 37] for, uh, the ambassador program, i'm going to click on the participants tab to find one of the participants who's been invited to this \[11 47] so it looks like jamie has joined this campaign so let's go ahead and log into the ambassador portal as jamie and see what happens \[11 58] all right so you'll notice now that because i have provided the api key for the ambassador program, now when somebody in your ambassador program views the ambassador portal in this top navigation bar, they will see a little flag \[12 14] and because my browser's locale is set to english, it defaults to english if i was to click on this little drop down, i can see that i have the choice of selecting between english and spanish \[12 27] so if i select spanish, it changes my language now to spanish, and the items that we are translating at this time is the campaign title and the campaign overview \[12 39] so you can already see that the campaign cards are showing spanish translations for these campaigns and if i click into the campaign, you can see that they're automatically displaying now the spanish translations for the campaign overview that i provided to the users \[12 56] so that parts in is getting translated most of the stuff from roster, uhm, and the roster ui is not going to be getting automatically translated at this time \[13 07] so stuff in the requirements tab and, oh, the guidelines is actually getting translated so we are translating we are content on this page \[13 15] uhm, okay, cool so hopefully that helps understand what's happening, what is and isn't getting translated in the ambassador portal like i said, if you have content you'd like to see translated that's not currently in the supported set of things getting translated, shoot us an email \[13 33] we'd love to hear about your different situations and we will make the best accommodations as we can hopefully this was helpful \[13 42] please have a wonderful day thank you step by step instructions create a weglot account and project go to weglot com and create an account if you don't have one after account creation, start a new project name your project (e g , roster ambassador translations ) under website technology , select other click next to proceed configure language settings set english as the original language choose additional languages under translated languages note the pricing tiers might limit the number of languages enter roster link under domain url click next to configure obtain and use the weglot api key in the step labeled add weglot snippet , locate the api key within the javascript provided copy the full api key value (without quotes) to your clipboard the api key starts with wg followed by a long alphanumeric value e g wg 5f357807f1ba2d0b66a900d5ff6d47bse if the next button appears as disabled, then proceed to the next step if the next button is enabled, then click next add the weglot api key to your roster program's settings in order to proceed with the project setup in weglot, weglot requires that the api key is used on a live web page that's what we'll do in this step in your roster account, navigate to programs > settings of the specific program to which you want to add translations in program settings, click on the integrations tab in the translation via weglot section, paste the weglot api key into the weglot api key field two toggles will appear below the weglot api key field application form applicants can view the program's application form in any of the languages you enable in the weglot project campaigns ambassadors in the program can see translations for campaigns to which they are invited enable application form even if you don't plan to enable translations for the application form later on this is just to get past the next step in the weglot project setup view the program's hosted application form while still in program settings, click on the recruitment tab in the recruitment form section, click copy > copy form link open a new browser tab and paste in the recruitment form link ensure you see a language switcher at the bottom right of the form click the language switcher and select one of the other languages the form should automatically translate final configuration in weglot in weglot, the project setup should now automatically updated to show as completed if not, try refreshing the page click to view the new project click general under the settings section in the left hand navigation locate the auto switch toggle and enable it click save changes click app settings under the settings section in the left hand navigation click the add dynamic button in the dialog, enter body as the selector, and ambassador portal as the description click save translate the application form when enabled in program settings, the application form will be translated into the languages you selected in the weglot project this includes the form description, field labels, and the confirmation page message translate campaigns when enabled in program settings, the following campaign details for ambassadors who are in a program with translations enabled will be translated campaign title campaign overview campaign style guide view and edit the translations in weglot in weglot, click languages this lists the languages you have enabled for your weglot project, and a count for how many words have been translated for each language click on a language to view and edit all the translations made by weglot need help? if you need any additional assistance with with your roster account, feel free to contact our support team at support\@getroster com mailto\ support\@getroster com we're here to help!