How to Integrate Google Dialogflow with Wix

Set Up Google Dialogflow

• Log in to your Google Cloud Platform console. If you don't have an account, create one and enable billing access.

 

• Navigate to the Dialogflow console and create a new Dialogflow agent. Specify the Google Project you created in the earlier step, or let Dialogflow create the project for you.

 

• Develop your Dialogflow agent by adding intents and training phrases which represent user interactions. Set up responses and check the logic using Dialogflow's test feature.

Enable Webhook in Dialogflow

• In your Dialogflow console, select the Fulfillment option from the left menu. Enable the Webhook by toggling it on.

 

• Specify your full webhook URL in the form of an HTTPS endpoint. This will be the URL where Dialogflow sends the request when it matches an intent with fulfillment enabled.

 

• Make sure your webhook is publicly accessible and configured to handle webhook requests properly.

Create a Wix Site

• Log in to your Wix account. If you don't have an account, you will need to sign up.

 

• Select a template or start with a blank site. Customize the appearance and layout according to your needs.

 

• Navigate to the Wix Editor to further customize your site using drag-and-drop features.

Integrate Dialogflow Using Custom Code

• In the Wix Editor, click on "Dev Mode" in the top menu to enable Velo by Wix. This provides access to frontend and backend coding capabilities.

 

• Create a new backend web module (e.g. dialogflow.jsw) by navigating to the Side Panel, selecting "Backend," and clicking "Add Module."

 

• Implement your webhook endpoint in this module using the code sample below. Replace "YOUR_PROJECT_ID" and other placeholders with actual values from your Dialogflow agent.

import { ok, internalServerError } from 'wix-http-functions';

export function post_dialogflow(request) {
  return request.body.json()
    .then(requestData => {
      // Handle and process the Dialogflow request
      const intentName = requestData.queryResult.intent.displayName;

      if (intentName === 'Specific Intent Name') {
        const response = { fulfillmentText: "Your response text here." };
        return ok({ headers: { "Content-Type": "application/json" }, body: response });
      }
      
      return ok({ headers: { "Content-Type": "application/json" }, body: { fulfillmentText: "Default response" } });
    })
    .catch(() => internalServerError({}));
}

Connect Dialogflow to Wix Site

• Set the URL of your Wix site's webhook endpoint in your Dialogflow agent's Fulfillment settings. This URL will look something like `https://www.yoursite.com/_functions/dialogflow` where `dialogflow` is your backend function name.

 

• Test your integration by interacting with the Dialogflow agent through the Wix site and observing the responses to ensure proper working.

Testing and Final Deployment

• Test end-to-end user interactions with your Wix site to ensure the Dialogflow integration functions as expected.

 

• Fix any detected flaws in interaction flow from testing. Check error logs in Wix and Dialogflow for debugging if necessary.

 

• Deploy your changes and make your Wix site live to allow user interaction.