The website for our Advanced Ads plugin for WordPress is completely in English, because I simply lack the time to translate everything. However, since the second biggest user group is from Germany and we are too, I wanted to at least tell them that they can get support in German.

Since one of our support channels is the Zopim live chat, I decided to translate the welcome message into German, when the users speaks this language. In this tutorial I am going to show you how I implemented this.

If you don’t use Zopim for live chat then this tutorial can still be of use to you if you have elements on your site that you would like to show to users with a specific language only. Just skip the part where I am talking about the Zopim chat.

You're using WordPress and would like to get Advanced Ads for free?

The result

Just to make sure that you understand my goal here. I want to display the Zopim chat widget completely in German when a user with a web browser that accepts German as a language is visiting the page. The widget is displayed in English for everyone else.

So this is how it looks by default:

zopim chat English

and this is the German version:

Zopim widget in German

I also translated the welcome message that appears after opening the widget and the different versions for “I am online” and “I am offline”.

Zopim API

The Zopim backend lets you set up the text only in one language. Lucky for me that I found the Zopim api in order to dynamically adjust this.

I learned about the zopim api a while ago, but didn’t need it back then. Now it was the perfect fit for my needs and easy to use too. You can use it to dynamically adjust anything in your widget. The translation is just feeling like the tip of the iceberg, but still a very good starting point.

Check out the api at https://api.zopim.com.

Your first step to increase your ad revenue

Subscribe to my monthly newsletter and get additional ad optimization tips to boost your ad revenue. It is free and you can opt out at any time.

Adjusting the Zopim code

If you don’t have a Zopim account yet, just create one. I used the free version for a couple of months and only recently upgraded when I started to receive multiple requests at the same time.

The api is simple to use, because it is just an adjustment to the zopim code on your site. You only have to inject some JavaScript code right below the original zopim tag and you are good to go.

Let’s take a look at an example of a default zopim chat code:

Don’t copy it, because I made some adjustments in order to hide my client id 🙂

Now, this is the complete code that I used in order to translate the zopim chat into German.

As you might see, the magic happens between line 8 and 16. This is it in a nutshell:

What is happening here? I make use of three api functions in order to translate my widget:

This function allows me to adjust the message for the online and the offline version of the widget title.

This function set the language to German. This simply means that some of the other strings in the widget like the option buttons are now also labeled in German.

This function translates the welcome message that appears below my avatar when people actually open the widget.

Sweet, right?

Now let’s take a look on how I implemented both versions of the zopim chat into my site.

Using Advanced Ads to display the correct zopim language

In theory, I wanted the widget to first check if the user on the website has German set up in his browser. If so, he would see the German zopim chat. If not, the default one would be displayed.

The implementation was fairly easy to accomplish, because my Advanced Ads Pro plugin already has it. Even though it is a plugin to manage ads in WordPress it comes with a lot of powerful injection features that can be used for almost anything. I am making use of this a lot of times already, also on webgilde.com.

In order to proceed, please make sure that you have Advanced Ads and Advanced Ads Pro installed. You can get both from wpadvancedads.com.

Setting up the Zopim widgets

In the next step we need to create one “ads” for each version of the Zopim widgets. In order to do this you just have to go to Advanced Ads > Ads in your WordPress dashboard and click on New Ad.

Now set a title and insert your Zopim widget code that you can get from the Zopim dashboard. Just save the “ad” and the default Zopim widget would be complete. It should look similar to this:

default zopim setup

There is one additional step you need to do for the first widget.

Search for the Ad Groups meta box on the right and create a new group called Zopim Chat. Make sure that both ads are assigned to it.

To create the code for your localized widget you just take the default version and add the third code block – the one with the localization code – from above to it. You can check with the second code block for the correct position. I hope that it is easy enough to find the text in the code that you have to adjust to your needs.

As an essential setting you now also need to use the Browser Language visitor condition for the localized Zopim chat. To do that go down to the Visitor Conditions meta box, search for the browser language option in the select field, and add it. You should then see an option that looks similar to this screenshot:

browser language visitor condition

You can of course change the language here.

Now, you should save and publish both widgets. Don’t worry, they are not yet visible in the frontend.

Setting up the widget group

For the next step head over to Advanced Ads > Groups. You should find your Zopim Chat group there with both chat widgets inside.

Now, click on the ad group name or on the Edit link below it and select Ordered ads as the group type.

Then adjust the weight of the widgets so that the localized one has the higher weight. This will force Advanced Ads to check it first and only if the visitor condition we set up earlier (visitor with a German browser) is not true, the default widget will be displayed.

Check this screenshot to see how I did set it up.

zopim chat group

Don’t forget to save the groups now.

To make the ad visible in the frontend, we are going to create a placement in the next step.

Setting up a placement

The Zopim widget code should be loaded in the header of your theme. Advanced Ads comes with a pre defined placement for this position so you don’t have to do any coding.

Go to Advanced Ads > Placements and select the Header Code placement. It is the one with the following image.

header placement

You can now enter a name for the placement, for example Zopim Header. As the item you select our Zopim Chat group (not the individual widgets).

The placement should look similar to this in the placement list:

zopim header placement

Now save the placements and everything should work fine.

Let me know in the comments if you were able to set it up or have any additional questions.

The Author

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. Salman Khan

    Hi Thomas,
    thanks for this tutorial. Can you please let me know that is it mobile app compatible. I need to develop an app having chat functionality which needs the same feature of translate the chat message in other language

    1. Thomas Maier Article Author

      Sorry, but I don’t know whether zopim could work in an app. Please refer to their support.