--- title: Creating Multilingual Content Using Webhooks and AI in SitecoreAI description: SitecoreAI CMS can simplify multilingual content translation using webhooks and the OpenAI API—saving time and enhancing global reach. publish date: 2025-01-14 author: Freddy Rueda image: https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/blog_hero_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=4b206de83a9f4d21af76de152696bf6f url: http://www-qa.oshyn.com/blog/2025/01/xm-cloud-ai-webhooks-multilingual-content --- # Creating Multilingual Content Using Webhooks and AI in SitecoreAI ![Multicultural concept](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/blog_hero_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=4b206de83a9f4d21af76de152696bf6f&hash=75B3561146FBE60649272124F2D20FFD) If you’re a global enterprise with customers worldwide, you must translate content into multiple languages. However, this process can be complex and potentially expensive, involving multiple content teams, translation tools, and workflows. Luckily, SitecoreAI, formerly known as Sitecore XM Cloud, offers multilingual capabilities that make the process easier, especially if you integrate AI. ![Open AI, WebHooks screens](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/webhooks-openai_xm-cloud-ai-webhooks-multilingual-content.jpeg?rev=532181f90f4440079b42cb73863fd8d4) This blog will explain how AI can automatically populate content in any language by adding a version item in SitecoreAI using webhooks. We’ll explore how to integrate the OpenAI API into your workflow, starting with a step-by-step guide on working with the API itself. We’ll then cover how to add and enable additional languages in SitecoreAI, including how to capture the "Add Version" event information through webhooks. You’ll learn how to call the OpenAI API in a Next.js application to translate all fields of a Sitecore item and update the new version’s content using GraphQL Mutations. As a bonus, we’ll also get into the costs of using the OpenAI API. ## The Process The diagram below shows how we used Webhooks and AI to translate the content and automatically create new version items. ![Translate Item Content via Webhooks](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/translate-item_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=dc5044c9bd4242bf9955ae76b5f4de56) ## The OpenAI API We utilized the OpenAI API to accomplish this task; however, you can use any AI API of your choice. After creating and funding an account, you must create an API key and use an API testing tool such as Postman to send requests to the API endpoint. ![API Keys screenshot](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/api-keys_xm-cloud-ai-webhooks-multilingual-content.png?rev=752ffde2363146b18e2b4da2ef5589f3) Create a POST method call in Postman and set the following: URL: https://api.openai.com/v1/chat/completions Authorization: Use a Bearer authorization with the OpenAI APIKey. ![Bearer authorization with the OpenAI APIKey](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/bearer-authorization_xm-cloud-ai-webhooks-multilingual-content.png?rev=6905f3b242674715bb14eae656ca00ba) Body: We have to define the model, prompt, and maximum number of tokens we will use in a call. We must balance using fewer tokens for faster, cost-effective responses and more for detailed, context-rich outputs. Check the example. ``` { "model": "gpt-4o", "messages": [ { "role": "user", "content": [ { "type": "text", "text": "Tell me in a 10-line paragraph why SitecoreAI is a great choice when talking about Digital Experience Platforms." } ] } ], "temperature": 1, "max_tokens": 1000, "top_p": 1, "frequency_penalty": 0, "presence_penalty": 0, "response_format": { "type": "text" } } ``` Response: ``` { "id": "chatcmpl-AXD3JwXfvMzn8bZJdYO76fnCbmwpb", "object": "chat.completion", "created": 1732478361, "model": "gpt-4o-2024-08-06", "choices": [ { "index": 0, "message": { "role": "assistant", "content": "SitecoreAI is a leading choice among Digital Experience Platforms (DXPs) due to its comprehensive capabilities in managing and delivering personalized content experiences across multiple channels. Its cloud-native architecture ensures scalability, flexibility, and streamlined deployment, which allows businesses to quickly adapt and respond to ever-changing market demands. With robust tools for content creation, management, and optimization, it empowers marketing teams to deliver seamless, relevant, and engaging customer experiences. The platform's integration capabilities with third-party applications further enhance its versatility, offering a unified solution that leverages existing tech investments. Its AI-driven personalization and analytics features provide deep insights into customer behavior, enabling effective tailoring of content strategies. Additionally, the intuitive user interface and developer-friendly environment make it accessible for both marketers and developers, promoting collaboration and innovation. Security and compliance features are top-notch, ensuring that data governance standards are met. Lastly, the continuous delivery of updates and new features from Sitecore assures organizations of remaining at the forefront of digital transformation efforts.", "refusal": null }, "logprobs": null, "finish_reason": "stop" } ], "usage": { "prompt_tokens": 31, "completion_tokens": 195, "total_tokens": 226, "prompt_tokens_details": { "cached_tokens": 0, "audio_tokens": 0 }, "completion_tokens_details": { "reasoning_tokens": 0, "audio_tokens": 0, "accepted_prediction_tokens": 0, "rejected_prediction_tokens": 0 } }, "system_fingerprint": "fp_831e067d82" } ``` Check the choices.messages object, where the content value contains the AI’s response. Another important value to consider is total_tokens, which determines the cost of the API call. ![Postman Sample Request](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/postman-sample-request_xm-cloud-ai-webhooks-multilingual-content.png?rev=8ba82937adcf4e46aee1454e8ce3461c) *Postman Sample Request* Once you are familiar with the OpenAI API and its capabilities, you can proceed to the next steps. ## Enable Multilanguage in SitecoreAI Now, let’s learn how to add languages to a site in SitecoreAI. First, go to the content tree and find System → Languages to add a new language. For this example, we chose Portuguese. ![Enable Multilanguage Step 1](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/enable-multilanguage-1_xm-cloud-ai-webhooks-multilingual-content.png?rev=04283f033c2a42f2b00c8cceb52651cf) With this configuration, you can see the language of every item in the content tree. ![Enable Multilanguage Step 2](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/enable-multilanguage-2_xm-cloud-ai-webhooks-multilingual-content.png?rev=c917c8f3f220423699aa1d1a3d33344c) Below the language label, it says «0 versions», meaning we need to add a version to start generating content in Portuguese. Select the desired language, then go to the Versions tab in the ribbon menu and click Add, or use the «Add new version» link that appears in the yellow prompt. Once you’ve done this, you’ll have a Portuguese version of the item ready to add content. ![Enable Multilanguage Step 3](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/enable-multilanguage-3_xm-cloud-ai-webhooks-multilingual-content.png?rev=1a012d55509641e092cc894611b3619d) ![Enable Multilanguage Step 4](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/enable-multilanguage-4_xm-cloud-ai-webhooks-multilingual-content.png?rev=dfd891abfe964ba7a2258405bad6929c) After creating the item in the desired language and setting its content, you might add the language code to the site’s URL: https://www.demo.localhost/pr-BR. However, you might encounter a 404 error. ![Enable Multilanguage Step 5](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/enable-multilanguage-5_xm-cloud-ai-webhooks-multilingual-content.png?rev=2a7fa03590c7437188ed131e3e4a9157) The language hasn’t been added to the site configurations. To see the content in our local environment, we must add the language code into the next.js.config file in the locales list. This will recompile your rendering container and enable the language on the site. ![Enable Multilanguage Step 6](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/enable-multilanguage-6_xm-cloud-ai-webhooks-multilingual-content.png?rev=7871bb47018d4ac5978ede9d716d0410) Below, the 404 error has disappeared and the Portuguese text is visible. ![Enable Multilanguage Step 7](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/enable-multilanguage-7_xm-cloud-ai-webhooks-multilingual-content.png?rev=9f609324047848e9b61175ec23b39759) One best practice to remember is enabling the Fallback Language functionality to display default language content when content is unavailable in the selected language. ## Get the Add Version Event Info Webhooks allow us to manage various item events in SitecoreAI. In this case, we’ll use a Webhook Event Handler to handle the item_versionAdded event. ![Webhook Event Handler item](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/add-version-1_xm-cloud-ai-webhooks-multilingual-content.png?rev=a5e74e32c5a2457996e8a3acae0b6fc6) The event data should be handled like this: ![Event Data](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/add-version-2_xm-cloud-ai-webhooks-multilingual-content.png?rev=a76d6e0d8a71468d967f1e8949bc7f68) The item:versionAdded event sends all relevant information to the Webhook. The Webhook then extracts the new version's ItemId, language, and version number. This data is then passed to the CallGraphQLMutationAsync method, which uses it to call the SitecoreAI API. Code snippets can be found here. ## Calling the OpenAI API and Translating Content On the SitecoreAI side, we must retrieve the item information via GraphQL and fetch all the content fields. ![XM CLoud- item info via GraphQL](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/calling-openai-api-1_xm-cloud-ai-webhooks-multilingual-content.png?rev=9bb6410af51a45699e102cfb38ac3c53) Explanation: The method receives the itemId in the request body, which is then used to create a GraphQL query to retrieve the list of fields. The resulting JSON structure is linked to the prompt and then passed to the callOpenAIAPI method. Below are the parameters: | Parameter | Value | | --- | --- | | URL | https://api.openai.com/v1/chat/completions | | Prompt | Translate this JSON to ${language} but only the values not the fields while keeping the original structure intact. Return a JSON object using valid JSON syntax. Use double quotes around keys and values, and avoid including line breaks or wrapping it in additional formatting like markdown.` + JSON.stringify(resultQuery) | | Model | gpt-4o | | Tokens | 10000 | The language is inserted in the prompt as the ${language} token. It’s important to note that we’re requesting to translate only the JSON values, not the tags. The code of method callOpenAIAPI: ![The code of method callOpenAIAPI](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/calling-openai-api-2_xm-cloud-ai-webhooks-multilingual-content.png?rev=4c77081784d44084ad60a2343e256bf9) Explanation: The first part involves creating the body to send to the OpenAI API. The parameters are set in the body, including the APIKey. Using the POST method, we can call the API, and the response is received in the following line: ``` const content = data.choices[0]?.message?.content; ``` Note that the response from the API may contain some unexpected special characters. To handle this, we can “clean” the content using a regular expression that replaces all unnecessary characters with blank spaces: ``` content.replace(/```json\n?|```/g, '').replace(/\n/g, '') ``` By doing this, we obtain all the fields with their content translated. You can view the code here. ## Using Mutations to Update the New Version Item The final step in this process is to update the item’s content with the translated text. We can use GraphQL mutations to accomplish this: ![Update Item's content with the translated AI text](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/using-mutations-1_xm-cloud-ai-webhooks-multilingual-content.png?rev=91c4eea998da4b9782a369d07e67d92f) Explanation: The mutationToExecute variable forms the mutation query to send to the Authoring API. This query uses the itemId, language, and version of the item to be updated. The translatedObject results from the previous step contain the JSON with all the translated fields. A key component is the getFieldsData method, which iterates through all the fields and generates the correctly formatted input for the fields parameter in the mutation query. Once the mutation is executed, we have an item with translated text in SitecoreAI. All this functionality will be leveraged simply by clicking the Add New Version link or the Add button. ![Sitecore translated version update](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/using-mutations-2_xm-cloud-ai-webhooks-multilingual-content.png?rev=3e772f4ac2cd46809fe5d9f4e0a79d41) ## OpenAI API Costs Costs are directly tied to the number of tokens used in an API call. This includes both the words in the prompt and the response. The more tokens you use, the more detailed and accurate the response will be, increasing the cost. Below is a test we conducted using various prompts. Prompt 1 ![OpenAI API Costs - Prompt 1](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/openAPI-costs-1_xm-cloud-ai-webhooks-multilingual-content.png?rev=e5b5400920ca4daeb350a202c730e873) Prompt 2 ![OpenAI API Costs - Prompt 2](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/openAPI-costs-2_xm-cloud-ai-webhooks-multilingual-content.png?rev=4e2a3498471c41c09398d23528b1b91c) | Tokens used | Costs | | --- | --- | | Prompt 1 → «total_tokens»: 226 | 0.0019775 USD | | Prompt 2 → «total_tokens»: 2191 | 0.01422 USD | When used for translation, the OpenAI API cost is relatively low. ## Translated Example Here is an example of an English essay translated into French, Portuguese, German, and Spanish using our approach. ![Example of an English essay translated into French, Portuguese, German, and Spanish using our approach - step 1](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/example-1_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=d6eab56a93be4873997da675e883a064) ![Example of an English essay translated into French, Portuguese, German, and Spanish using our approach - step 2](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/example-2_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=8cd100578627483db2c13749913ed075) ![Example of an English essay translated into French, Portuguese, German, and Spanish using our approach - step 3](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/example-3_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=79f54bb95b3b49d993b8d790650a6109) ![Example of an English essay translated into French, Portuguese, German, and Spanish using our approach - step 4](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/example-4_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=5de0f74f4f9a4ef3aac3d29ecd82db84) ![Example of an English essay translated into French, Portuguese, German, and Spanish using our approach - step 5](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/example-5_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=ff5b8278ad764e3f9ba4bfd1f178eb62) ![Example of an English essay translated into French, Portuguese, German, and Spanish using our approach - step 6](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/example-6_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=ae0a0d43ce7c4d72887c206be5674667) ![Example of an English essay translated into French, Portuguese, German, and Spanish using our approach - step 7](https://www-qa.oshyn.com/-/media/Oshyn/Insights/Blog/2025-01-16-Creating-Multilingual-Content-Using-Webhooks-and-AI-in-XM-Cloud/example-7_xm-cloud-ai-webhooks-multilingual-content.jpg?rev=ec3c82e42a2440cbbf40e852101293c5) ## Wrapping Up Integrating AI with SitecoreAI and using Webhooks can allow you to create ready-to-publish multilingual content for your website. These capabilities can save marketers time and help global enterprises go to market quickly with translated content for a worldwide audience. If you want to maximize the capabilities of SitecoreAI (or other Sitecore products), Oshyn is available to help. As a certified Sitecore partner, we have decades of experience working with an array of products and building engaging websites for customers. If you need technical help implementing these products, learning how to incorporate AI, or having a marketing team to help you use all of Sitecore’s marketing capabilities, then we can help. Contact us to find out how we can support your digital experience needs.