Installing AI Chat on Webflow

Additional instructions for installing Spara through Webflow

Many customers rely on third party tools to build and maintain their web presence. We've provided additional instructions and tips for installing Spara via your third party tool of choice:

Installing Spara in Webflow

Refer to specific Installing Spara Navigator instructions for more context.

Step 1: Navigate to your Webflow site's General Settings > Custom Code page.

Step 2: Paste your Spara JavaScript snippet into the "Head code" text input.

Step 3: Publish your website.

Redirecting to Spara from a Webflow form

Unfortunately Webflow does not provide a no-code mechanism way to dynamically append query parameters to a form redirect on submission. But this is easily solved by inserting a custom Javascript snippet into the head of any webpage with a Webflow-powered form.

Below is a complete example of a Javascript snippet to solve this problem. This code assumes your Webflow forms have:

• Email, First Name, and Company Name fields

• The form name is "Marketing-Form"

Make sure to modify this code with your own form name and fields.

<script>
// Redirect to a dynamically built url after form submission

document.addEventListener("DOMContentLoaded", function() {
  $(document).ajaxComplete(function( event, xhr, settings ) {
    if(settings.url.includes("https://webflow.com/api/v1/form/")){
      const isSuccessful = xhr.status === 200;
      // This is the name of the form in Webflow. Give it a more meaningful name and then change here as well.
      const formName = "Form";
      const isRightForm = settings.data.includes(formName.replaceAll(' ', '+'));
      console.log(isSuccessful);
      console.log(isRightForm);
      if(isRightForm && isSuccessful){
        const email = $('#Email-7').val();
        const firstName = $('#Full-Name-4').val();
        const companyName = $('#Company-Name-4').val();
	    window.location = '/chat?lead_email=' + email + '&lead_first_name=' + firstName + '&lead_company_name=' + companyName;
	  } else if(!isRightForm) {
        console.log('Not the form we want. Do nothing.');
      }
    }
  })
});
</script>