Back to Sidekick Plugins Guides

Integrations

WPML For Translations

This guide applies to:

  • Basic
  • Professional

Introduction

Draw Attention is compatible with WPML. By using WPML for translations, you can translate your interactive image content to your preferred languages!

Note: The WPML integration is compatible with both the Free and Pro editions of the Draw Attention plugin.

Setting up WPML for Translations

Step 1: Install and Activate

Before we can start translating, let’s start by installing and activating WPML. Make sure to download the ZIP file of the latest version from your WPML Account for activation.

Head on over to your WordPress Admin Dashboard > Plugins > Add New and upload your WPML plugin, and then activate it.

Plugins screen showing WPML Multilingual CMS version 5.1.0 installed and active.
WPML Multilingual CMS installed and activated.

Step 2: Select Languages

After that, you can head to WordPress Admin Dashboard > WPML > Setup.

In the first step, Languages, choose your default language and the languages you want to translate your site into.

WPML Setup wizard Languages step with English as the default language and German added as a translation language.
Choose your default language and add the languages you want to translate into.

Step 3: Finish Setup

You can continue with the Setup Wizard steps to complete the setup. Since you’ll translate your interactive images yourself, you can skip the AI translation setup and choose Translate Some when the wizard asks how you’d like to translate your content.

In Step 8: Plugins of the WPML Setup Wizard, make sure String Translation is checked and click Install and activate so that you can translate strings and media.

WPML Setup wizard Plugins step with String Translation checked and the Install and activate button highlighted.
Check String Translation and click Install and activate.

At the end of the Setup Wizard, click Apply settings and go to Translation Dashboard to complete the setup.

WPML Setup wizard Finished step with the Apply settings and go to Translation Dashboard button highlighted.
Click Apply settings and go to Translation Dashboard.

Step 4: Enable WPML for Draw Attention

Navigate to your WordPress Admin Dashboard > WPML > Settings and click Post Types Translation.

Find Draw Attention (da_image) in the list, set it to Translatable (only show translated items), and then click Save.

WPML Post Types Translation settings with Draw Attention (da_image) set to Translatable, only show translated items, and the Save button highlighted.
Set Draw Attention to Translatable in WPML > Settings > Post Types Translation.

On WPML versions before 5.0, this setting is under WPML > Settings > Multilingual Content Setup > Post Types Translation.

How to Translate Draw Attention

Step 1: Locate and Select Your Interactive Image

Open the interactive image you want to translate. In the Pro edition, go to WordPress Dashboard > Draw Attention > All Images and click Edit under the image. In the Free edition, go to WordPress Dashboard > Draw Attention > Edit Image.

In the Language box, under Translate this Document, click the WordPress icon to translate with the WordPress Editor.

WPML Language box on a Draw Attention image with the WordPress icon highlighted under Translate this Document.
Click the WordPress icon in the Language box.

A pop-up will appear. Select All Draw Attention, check I understand, switch to the WordPress Editor, and click Apply.

You are about to translate with the WordPress Editor pop-up with All Draw Attention selected, the I understand checkbox checked, and the Apply button highlighted.
Choose All Draw Attention, confirm, and apply.

Step 2: Select Translation Language

To begin translating your interactive image, click the + icon in the Translate column next to the language you want to translate into. This creates the translated interactive image in your selected language.

Language box with the plus icon highlighted in the Translate column next to German.
Click the + icon next to the language to create the translation.

Step 3: Recreate Your Hotspots and Manually Translate!

First, add your image and publish your translated interactive image. The Hotspot Areas section only appears after you publish. Now, you can begin translating!

Name the interactive image, recreate your hotspots, and manually translate the hotspots and their descriptions into your desired language.

Hotspot Areas on the German translation with the bedroom area drawn, the title Schlafzimmer and a German description.
Recreating the hotspots and manually translating details for the new language.

Step 4: Visit the Original Interactive Image

Once you’ve saved the translations, you can switch between languages to view the translated image on the page it’s embedded on. Click the alternate translation to view the interactive image in that language.

(Optional) Create Translated Page

If the translation switcher is not working for Draw Attention, please double-check to make sure a page exists for the translation. If the overall page is not translated, then Draw Attention will remain in the default language, too.

Example: English

Interactive image on the English page with the language switcher above it and the Bedroom hotspot selected.

Example: Translated to German

The same interactive image on the German page with the Schlafzimmer hotspot selected.

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides