How to Integrate Microsoft Azure Cognitive Services with Wix

January 24, 2025

Learn to seamlessly connect Microsoft Azure Cognitive Services with Wix in this step-by-step guide, enhancing your website's capabilities effortlessly.

How to Connect Microsoft Azure Cognitive Services to Wix: a Simple Guide

Set Up Microsoft Azure Cognitive Services

Go to the Azure Portal and sign in with your Microsoft account. Create a new resource by selecting the "Create a resource" button.

Search for "Cognitive Services" and select the "Cognitive Services" resource type, then click "Create".

Fill in the essential information including Subscription, Resource Group, Region, and Pricing Tier. Note the "Key" and "Endpoint" values provided upon creation—they will be necessary for integration.

Choose Your Desired Cognitive Services

Go to the "Resources" tab and select your cognitive service. Choose the specific API you wish to use, such as Text Analytics, Vision, or Speech Service.

Explore the documentation of the chosen API to understand its endpoint, required parameters, and how to format requests to the service.

Prepare Your Wix Website

Log into your Wix account and navigate to the dashboard of the site you want to integrate with Azure Cognitive Services.

Consider the part of your site where you intend to use the Cognitive Services, such as input fields for text analysis or image uploads for vision processing.

Create a Backend Solution with Wix Corvid (Velo)

Activate Corvid by Wix (Velo) in your site editor by clicking on "Dev Mode" at the top dashboard.

Create a new "Backend" file in your Wix site by navigating to the Code Files section in the Site Structure sidebar.

Use the following JavaScript code to make HTTP requests to Azure using the APIs. Substitute 'YOUR_KEY' and 'YOUR_ENDPOINT' with the actual values provided by Azure.

import { fetch } from 'wix-fetch';

export function callAzureCognitiveServices(data) {
    return fetch("https://YOUR_ENDPOINT/vision/v3.1/analyze", {
        method: 'POST',
        headers: {
            'Ocp-Apim-Subscription-Key': 'YOUR_KEY',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(json => {
        console.log(json);
        return json;
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

Integrate Frontend Elements in Wix

Add user interface elements using Wix's editor, such as text boxes or upload buttons, to gather input data for the API.

Link these UI components to your Corvid backend functions by using event handlers. For example, add a button to trigger the API call from the frontend:

$w.onReady(function () {
    $w("#yourButtonId").onClick(() => {
        const data = {
            url: $w('#inputFieldId').value
        };

        callAzureCognitiveServices(data)
            .then(response => {
                $w('#outputFieldId').text = JSON.stringify(response);
            });
    });
});

Test and Deploy Your Integration

Within the Wix editor, test your site to ensure the integration functions correctly. Check console logs and displayed data for any errors or unexpected behavior.

Once confirmed working, publish your site, and the integration will be live and functional for users.

Omi Necklace

The #1 Open Source AI necklace: Experiment with how you capture and manage conversations.

Build and test with your own Omi.

How to Use Microsoft Azure Cognitive Services with Wix: Usecases

Enhance Website Accessibility and Engagement

Integrate Microsoft Azure Cognitive Services with a Wix website to enhance accessibility features, such as real-time text-to-speech conversion for visually impaired users, and automatic transcription of video content for those with hearing difficulties.

Utilize Azure's Computer Vision API to provide alternative text for images, making the content more accessible and searchable, thereby improving user engagement and SEO rankings.

Step-by-Step Implementation

Create an Azure account and access the Cognitive Services dashboard to generate API keys for the services you plan to use, such as Speech and Computer Vision.

Using Wix Corvid (now Velo by Wix), incorporate the API endpoints within your site's backend code to handle requests and responses, allowing for seamless integration of cognitive services.

Enhance your website with features like real-time text-to-speech or image recognition via JavaScript code snippets in the Wix Editor, utilizing the Azure service endpoints.

Benefits

Increased accessibility enables a broader user base, including individuals with disabilities, thereby enhancing inclusivity and compliance with accessibility standards.

Improved SEO performance due to accessible content and enhanced user experience resulting in longer session durations and reduced bounce rates.


// Example of implementing Azure Text-to-Speech in a Wix site
import { getSecret } from 'wix-secrets-backend';

export function processTextToSpeech(text) {
  const subscriptionKey = getSecret('AzureSubscriptionKey');
  const endpoint = `https://<region>.api.cognitive.microsoft.com/sts/v1.0/issueToken`;
  
  return fetch(endpoint, {
    method: 'POST',
    headers: { 'Ocp-Apim-Subscription-Key': subscriptionKey }
  })
  .then(response => response.text())
  .then(token => {
    // Use token to access text-to-speech service
  });
}

Personalized User Experience through Emotion Detection

Combine Microsoft Azure Cognitive Services' Emotion Recognition API with Wix to analyze users' emotions through their webcam feed, allowing the website to adapt its content dynamically based on the user's emotional state, thereby providing a personalized experience.

Implement the sentiment analysis feature to assess the tone of user interactions (e.g., comments or feedback) across the website, enabling tailored responses or content suggestions to enhance user satisfaction and engagement.

Step-by-Step Implementation

Register for an Azure account and access the Cognitive Services portal to generate the necessary API keys for the Emotion Recognition and Sentiment Analysis services.

Utilize the Wix Velo platform to establish backend functionality that handles the sending and receiving of data between your Wix site and Azure APIs, ensuring privacy and data security through secure handling of API keys and user data.

Incorporate JavaScript and Velo code into your Wix Editor site to actively interact with users' webcam feeds (with their consent) to detect emotions, and apply sentiment analysis APIs to analyze comments or feedback submitted by the users.

Benefits

Enables a highly personalized user experience by dynamically adjusting content based on real-time emotions, which can increase user engagement and satisfaction.

Gathers insightful data on user sentiment, allowing for improved decision-making in content delivery and user interaction strategies.

Fosters a user-centric online environment where feedback is swiftly acknowledged and acted upon, improving site reputation and user trust.


// Example of implementing Azure Emotion Recognition in a Wix site
import { fetch } from 'wix-fetch';

export function analyzeEmotion(imageData) {
  const subscriptionKey = 'yourAzureSubscriptionKey';
  const endpoint = `https://<region>.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes=emotion`;
  
  return fetch(endpoint, {
    method: 'POST',
    headers: {
      'Ocp-Apim-Subscription-Key': subscriptionKey,
      'Content-Type': 'application/octet-stream',
    },
    body: imageData
  })
  .then(response => response.json())
  .then(data => {
    // Process the emotion data
  });
}