Changelog

Wordbee App Installation Guide

Wordbee is a translation management system (TMS) designed to help organizations manage content translation and localization. With features such as translation workflow management, collaboration tools for translators, and integration with machine translation engines, it lets organizations reach international audiences effortlessly.

With the Contentstack Marketplace Wordbee app, you can easily translate your entries into multiple languages and provide localized versions within your Contentstack entries. You can translate entries using the Wordbee Full Page app and Sidebar Widget and view the translation status.

Prerequisites

Wordbee (Beebox) account
Contentstack account
Access to the Contentstack Organization/Stack as the Owner/Admin

Let's follow this step-by-step guide to install and configure the Wordbee app within your stack.

Steps for Execution

Retrieve Configuration Details from Wordbee
Install and Configure the Wordbee app in Contentstack Marketplace
Use the Wordbee app within your Stack

Retrieve Configuration Details from Wordbee

To get your configuration details for Wordbee, follow the steps given below:

Log in to the Wordbee (Beebox) account using your Wordbee account credentials.
In the Wordbee (Beebox) dashboard, choose your project and click Select.
Go to Settings from the left navigation panel and click the CMS Connector tab to get the API Url, API Project Key, API Login, and API Password of your project.

To get the API Callback URL, add your Stack API Key to the following link:

https://wordbee.contentstackmarket.com/api/prod-marketplace-wordbee-consumer-api?api_key=<Your Stack API Key>

Copy and paste the information to your clipboard. We will need these details while configuring the Wordbee app in Step 2.

In Project settings, verify if the Rule name under Text extraction rules is JSON.
Wordbee-Text-Extraction-Rule

When the Rule name is not JSON, then click the View all button and copy the following rule:

<?xml version="1.0" encoding="utf-8"?>
<ParserConfigurations xmlns="http://www.wordbee.com/config">
  
    <ParserConfiguration xmlns="http://www.wordbee.com/config">
      <Name>JSON</Name>
      <Description>For translation of all JSON node values.</Description>
      <ParserDomain>JSON</ParserDomain>
      <EParser>34</EParser>
      <Implementation>v2</Implementation>
      <SegmentationMode>SRX</SegmentationMode>
      <SegmentationParameters>{}</SegmentationParameters>
      <SegmentationSplitAtNewlines>false</SegmentationSplitAtNewlines>
      <SegmentationSplitAtInlineTags>true</SegmentationSplitAtInlineTags>
      <SegmentationTrimWhitespaces>true</SegmentationTrimWhitespaces>
      <SegmentationTrimMarkup>false</SegmentationTrimMarkup>
      <SegmentationRulesEnabled>true</SegmentationRulesEnabled>
      <VersionPretranslation>CompareTexts</VersionPretranslation>
      <SubConfigurations>
        <SubConfiguration Key="HTML">
          <ParserConfiguration>
            <Name>Default</Name>
            <Description>
  </Description>
          <ParserDomain>HTML</ParserDomain>
          <EParser>1</EParser>
          <Implementation />
          <SegmentationMode>SRX</SegmentationMode>
          <SegmentationParameters>{}</SegmentationParameters>
          <SegmentationSplitAtNewlines>false</SegmentationSplitAtNewlines>
          <SegmentationSplitAtInlineTags>true</SegmentationSplitAtInlineTags>
          <SegmentationTrimWhitespaces>true</SegmentationTrimWhitespaces>
          <SegmentationTrimMarkup>false</SegmentationTrimMarkup>
          <SegmentationRulesEnabled>true</SegmentationRulesEnabled>
          <VersionPretranslation>CompareTexts</VersionPretranslation>
          <CompactingOption xmlns="">0</CompactingOption>
          <ModulesVersion />
          <QA />
          <TrimAsianSpacesOnBuild>false</TrimAsianSpacesOnBuild>
          <AppendSpacesOnBuild>false</AppendSpacesOnBuild>
          <HtmlConfiguration xmlns="http://www.wordbee.com/config/html">
            <IncludeSpaces>false</IncludeSpaces>
            <CompressSpaces>true</CompressSpaces>
            <ConvertEntities>AllToCharacter</ConvertEntities>
            <CompressNbsp>false</CompressNbsp>
            <KeepInlineTags>false</KeepInlineTags>
            <AttCompressSpaces>false</AttCompressSpaces>
            <AttIncludeSpaces>false</AttIncludeSpaces>
            <AttConvertEntities>AllToCharacter</AttConvertEntities>
            <UseEntitiesForBadCharsInTarget>True</UseEntitiesForBadCharsInTarget>
            <WebEncoding>utf-8</WebEncoding>
            <DoNotSegment>false</DoNotSegment>
            <ExcludeNoLetterDigit>false</ExcludeNoLetterDigit>
            <ParseShortCodes>false</ParseShortCodes>
            <TextPatterns />
            <Code>
              <CodeTags>
                <Tag>script</Tag>
                <Tag>style</Tag>
              </CodeTags>
              <IncludeSpaces>false</IncludeSpaces>
              <CompressSpaces>false</CompressSpaces>
              <ActiveParserVersion>750</ActiveParserVersion>
              <FreeTextPatterns />
              <QuotedTextPatterns DefaultTrans="true" />
              <EnableNoTrans>True</EnableNoTrans>
            </Code>
            <InlineTags>
              <Tag>a</Tag>
              <Tag>acronym</Tag>
              <Tag>b</Tag>
              <Tag>big</Tag>
              <Tag>blink</Tag>
              <Tag>br</Tag>
              <Tag>cite</Tag>
              <Tag>code</Tag>
              <Tag>dfn</Tag>
              <Tag>em</Tag>
              <Tag>font</Tag>
              <Tag>i</Tag>
              <Tag>iframe</Tag>
              <Tag>img</Tag>
              <Tag>kbd</Tag>
              <Tag>s</Tag>
              <Tag>small</Tag>
              <Tag>span</Tag>
              <Tag>strike</Tag>
              <Tag>strong</Tag>
              <Tag>small</Tag>
              <Tag>sub</Tag>
              <Tag>sup</Tag>
              <Tag>tt</Tag>
              <Tag>u</Tag>
              <Tag>var</Tag>
              <Tag>ruby</Tag>
              <Tag>rt</Tag>
              <Tag>rc</Tag>
              <Tag>rp</Tag>
              <Tag>rbc</Tag>
              <Tag>rtc</Tag>
              <Tag>asp:label</Tag>
            </InlineTags>
            <Attributes>
              <Attribute Translatable="true" Visibility="Dynamic">
                <Attribute Pattern="alt" IsRegex="false" />
              </Attribute>
              <Attribute Translatable="true" Visibility="Dynamic">
                <Attribute Pattern="title" IsRegex="false" />
              </Attribute>
              <Attribute Translatable="true" Visibility="Dynamic">
                <Attribute Pattern="placeholder" IsRegex="false" />
              </Attribute>
              <Attribute Translatable="true" Visibility="Dynamic">
                <Attribute Pattern="tooltip" IsRegex="false" />
              </Attribute>
              <Attribute Translatable="true" Visibility="NotVisible">
                <Attribute Pattern="content" IsRegex="false" />
                <Tag Pattern="meta" IsRegex="false" />
                <Conditions>
                  <Condition>
                    <Attribute Pattern="name" IsRegex="false" />
                    <Value Pattern="keywords" IsRegex="false" />
                  </Condition>
                  <Condition>
                    <Attribute Pattern="name" IsRegex="false" />
                    <Value Pattern="description" IsRegex="false" />
                  </Condition>
                </Conditions>
              </Attribute>
              <Attribute Translatable="true" Visibility="Visible">
                <Attribute Pattern="text" IsRegex="false" />
                <Tag Pattern="asp:*" IsRegex="true" />
              </Attribute>
              <Attribute Translatable="true" Visibility="Visible">
                <Attribute Pattern="value" IsRegex="false" />
                <Tag Pattern="input" IsRegex="false" />
                <Conditions>
                  <Condition>
                    <Attribute Pattern="type" IsRegex="false" />
                    <Value Pattern="text" IsRegex="false" />
                  </Condition>
                  <Condition>
                    <Attribute Pattern="type" IsRegex="false" />
                    <Value Pattern="button" IsRegex="false" />
                  </Condition>
                  <Condition>
                    <Attribute Pattern="type" IsRegex="false" />
                    <Value Pattern="email" IsRegex="false" />
                  </Condition>
                  <Condition>
                    <Attribute Pattern="type" IsRegex="false" />
                    <Value Pattern="search" IsRegex="false" />
                  </Condition>
                  <Condition>
                    <Attribute Pattern="type" IsRegex="false" />
                    <Value Pattern="submit" IsRegex="false" />
                  </Condition>
                </Conditions>
              </Attribute>
              <Attribute Translatable="true" Visibility="Visible">
                <Attribute Pattern="text" IsRegex="false" />
                <Tag Pattern="asp:.*" IsRegex="true" />
              </Attribute>
            </Attributes>
            <PreTags>
              <Tag>pre</Tag>
              <Tag>script</Tag>
              <Tag>style</Tag>
            </PreTags>
            <PseudoEndTags>
              <Tag>head</Tag>
              <Tag>body</Tag>
              <Tag>table</Tag>
              <Tag>p</Tag>
            </PseudoEndTags>
            <NoTemplateForReconstruction>false</NoTemplateForReconstruction>
            <ActiveParserVersion>0</ActiveParserVersion>
          </HtmlConfiguration>
        </ParserConfiguration>
      </SubConfiguration>
    </SubConfigurations>
    <CompactingOption xmlns="">0</CompactingOption>
    <ModulesVersion>
      <item key="HtmlWrapper" value="1" xmlns="" />
    </ModulesVersion>
    <QA>
      <ExcludeByLanguage>
        <AcceptanceRate>0</AcceptanceRate>
        <Enabled>false</Enabled>
        <AllowedLocales>
</AllowedLocales>
    </ExcludeByLanguage>
  </QA>
  <TrimAsianSpacesOnBuild>false</TrimAsianSpacesOnBuild>
  <AppendSpacesOnBuild>false</AppendSpacesOnBuild>
  <JsonConfiguration xmlns="http://www.wordbee.com/config/json">
    <TrimWhitespaces>true</TrimWhitespaces>
    <ExcludeNoLetterDigit>false</ExcludeNoLetterDigit>
    <IndentJson>true</IndentJson>
    <IsMultilingual>false</IsMultilingual>
    <FileEncoding />
    <NodeSelectors>[{"path":"..*","includeChildren":false,"filterChildren":null,"ishtml":false,"ishtmlEncoded":false,"mappings":{"locales":[],"mapLocaleByDefault":true},"key":null,"min":null,"max":null,"cfs":null}]</NodeSelectors>
    <NodeLanguageMappings>{"locales":[],"mapLocaleByDefault":true}</NodeLanguageMappings>
    <TextPatterns />
  </JsonConfiguration>
</ParserConfiguration>
</ParserConfigurations>

Install and Configure the Wordbee app in Contentstack Marketplace

Follow the steps to install the application in Contentstack.
1. Log in to your Contentstack account.
2. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace.
3. Click Apps from the left panel.
4. Within the Marketplace, you can see all the available apps. Hover over the Wordbee app and click Install App.
5. In the pop-up window, select the stack where you want to install the Wordbee app, accept the terms and conditions, and click the Authorize & Install button.
6. On the Configuration screen, enter the following details:
  1. CMS Connector Credentials:
    1. Enter the API URL, API Project Key, API Login, and API Password of your Wordbee account retrieved in Step 1.
    2. Click the Verify Connection button to authorize the access.
    After verifying the connection, you can see the Wordbee Project Source Language and Target Language(s).
  2. Click the Next button.
  3. Content Type Settings:
    Click the Manage Fields button to include or exclude the fields for translation.
    
    In the Content Type Settings modal, select the content type. You will notice that all fields are selected by default. Deselect the fields you want to exclude from the translation and click Save.
  4. Click the Next button.
  5. Additional Settings:
    1. Roles: Select the Roles that can send the entries content for translation. By default, Admin can manipulate the app configuration settings.
    2. Publish Entry: Set the Environment(s) and Content Type(s) for publishing.
    3. Language Configuration: In the Language Configuration section, define the content translation languages for Wordbee and Contentstack to avoid any mismatch between the language codes.
      All entries from Wordbee languages will be localized into Contentstack languages. For any target languages not selected, the app will use the default language code of the stack.
      Click the + Add Language button to add a language.
    4. Language Presets: Language Presets are pre-configured sets of languages used for creating and managing multilingual content in a content management system.
      Select the existing Preset Name or Create the new preset, add the Language(s), and click Save to save the language configurations.
    Once done, click the Finish button.
    You can reset your configuration by clicking the Reset Configuration button.
7. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.
8. If the webhook is enabled for your app, you can view the webhook logs under the Webhook tab.
9. After configuring all the details, click the Save button.
10. Click the Open Stack button to start using the Wordbee application.
Use the Wordbee app within your Stack

To use the Wordbee application in your stack, you can use Full Page Location and Sidebar Widget.

Wordbee Full Page Location App

Follow the steps given below to use the Wordbee application:
1. Log in to your Contentstack account.
2. Go to the stack dashboard. In the left-hand side primary navigation, you will find the Wordbee app icon (as shown below).
3. Click the app icon to view the Wordbee app within your CMS.
4. In the Bulk Translate Modal, select the Content Type and add entries for translation.
5. After adding the entries, you can click Show Selected to view all the entries added for translation.
6. To initiate the translation process, click Translate.
7. In the Confirm Translation modal, fill in the details as follows:
  1. Source Language is by default selected. You can choose between the Language (Target Languages) or Preset(s) (Language Presets) options.
  2. Optionally, you can add Job References settings such as Deadline Date, Job comments, Live Environment URL, Internal Comments, and Image Source File URL.
  3. Once these details are added, click the Translate button.
8. Click Job Status to view the translation status of the entries.
9. Click Error Logs to view the error logs in detail.
  
  After successful translation, you can view the translated content in the entries.
Wordbee App Sidebar Widget

Follow the steps given below to use the Wordbee application:
1. Log in to your Contentstack account.
2. Go to the stack dashboard and navigate to the Entries page, then open the entry you want to translate. Click the Widgets icon from the right navigation panel.
3. Select Wordbee from the dropdown and fill in all the fields under the Translate tab.
  1. Source Language is by default selected. You can choose between the Language (Target Languages) or Preset(s) (Language Presets) options.
  2. Optionally, you can add Job References (optional) settings such as Deadline Date, Job comments, Live Environment URL, Internal Comments, and Image Source File URL.
4. Click the Manage Fields button to include or exclude the fields for translation.
5. In the Manage Fields modal, all fields are selected by default. Deselect the fields you want to exclude from the translation and click Save.
6. Click the Translate button to start the translation.
7. You can view the translation status under the Status tab.