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.
