Including current webpage URL in VoiceFlow chatbot conversation logs

I want to capture the URL of the webpage where users open my VoiceFlow chatbot and include it in the conversation transcripts. This would help me track which pages generate the most questions from users.

I attempted this approach but it’s not working:

(function(document, scriptTag) {
  var widget = document.createElement(scriptTag), 
      firstScript = document.getElementsByTagName(scriptTag)[0];
  widget.onload = function() {
    window.voiceflow.chat.load({
      verify: { projectID: 'YOUR_PROJECT_ID_HERE' },
      url: 'https://general-runtime.voiceflow.com',
      versionID: 'production',
      launch: {
        event: {
          type: "launch",
          payload: {
            page_url: window.location.href
          }
        }
      },
      autostart: false
    });
  }
  widget.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
  widget.type = "text/javascript";
  firstScript.parentNode.insertBefore(widget, firstScript);
})(document, 'script');

I also tried retrieving it later:

if (previous_event) {
  page_url = previous_event.payload.page_url;
} else {
  page_url = "unknown";
}

The previous_event variable seems undefined and I’m not sure how this would actually add the URL to the transcript records. Any ideas on the correct way to implement this?

The Problem:

You are unable to capture the URL of the webpage where users open your VoiceFlow chatbot and include it in the conversation transcripts. Your attempts to use the launch event payload and retrieve it later using previous_event have failed.

:thinking: Understanding the “Why” (The Root Cause):

The VoiceFlow SDK’s launch event payload is not designed to be accessed later in the conversation. While you can send data in the launch event, it’s not persistently stored for retrieval within your VoiceFlow dialog. To access this URL within the conversation, you must store it in a VoiceFlow variable at the start. The previous_event variable you were trying to use contains information only about the immediately preceding event in the current session—it is not a general repository of past events’ data.

:gear: Step-by-Step Guide:

  1. Modify your JavaScript Integration: Instead of relying on accessing the URL later, directly pass it as a VoiceFlow variable during the chatbot’s initialization. Update your JavaScript code as follows:
(function(document, scriptTag) {
  var widget = document.createElement(scriptTag), 
      firstScript = document.getElementsByTagName(scriptTag)[0];
  widget.onload = function() {
    window.voiceflow.chat.load({
      verify: { projectID: 'YOUR_PROJECT_ID_HERE' },
      url: 'https://general-runtime.voiceflow.com',
      versionID: 'production',
      variables: {
        page_url: window.location.href
      },
      autostart: false
    });
  }
  widget.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
  widget.type = "text/javascript";
  firstScript.parentNode.insertBefore(widget, firstScript);
})(document, 'script');
  1. Create a Variable in VoiceFlow: In your VoiceFlow project, create a new variable named page_url. Ensure it is accessible to your dialog. The JavaScript code above now passes the current URL as the value of this variable when the VoiceFlow chatbot loads.

  2. Access the Variable in your VoiceFlow Dialog: Within your VoiceFlow dialog, you can now use the page_url variable to access the captured webpage URL. You should be able to log it for debugging or include it in your conversation transcripts using VoiceFlow’s logging and data handling features.

:mag: Common Pitfalls & What to Check Next:

  • Variable Scope: Double-check that the page_url variable is accessible in the parts of your VoiceFlow dialog where you need it. Review the variable’s scope and ensure it’s properly defined and passed between different stages of your conversation.
  • VoiceFlow Variable Types: Make sure the page_url variable in VoiceFlow is configured with the appropriate data type (string) to correctly handle the URL value.
  • Typographical Errors: Verify for any typos in your code, especially in variable names (page_url) and the VoiceFlow variable configuration.
  • Debugging VoiceFlow: Use VoiceFlow’s debugging tools to inspect the variable values at different points in the conversation to verify that the page_url variable contains the expected URL.

:speech_balloon: Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.