How to Integrate Microsoft Azure Cognitive Services with Wix

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.