[Solved] Zapier Integration Failing

Hi There!

I’m trying to connect a form to Zapier and feel I have followed all of the steps correctly to set up the Wix integration (including installing the backend package), but keep getting this error when I try to submit the form: “(0 , zapier_integration_backend.postToZapier) is not a function”.

Any ideas?

Code below:

//The following imports bring data to the page necessary for the code to run.
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;
import { session } from ‘wix-storage’ ;
import { postToZapier } from@velo/zapier-integration-backend’

let allFieldsValid = false //This function sets the default boolean for whether all fields are valid (and of course, they aren’t at the time the page loads because they are not not yet filled in).

//This function uses the Wix Zapier integration package found in “Code Files” to pull information from the form into Zapier.
function zapierWrapper ( ) {
postToZapier ( “zapierNewReferralPartner” , {
“first_name” : $w ( “#input4” ). value ,
“last_name” : $w ( “#input5” ). value ,
“business_name” : $w ( “#input6” ). value ,
“email_address” : $w ( “#input7” ). value ,
“phone_number” : $w ( “#input8” ). value ,
“referral_code” : $w ( “#input9” ). value
});
}

//This function triggers every time any field in the contact form is updated. It checks the input fields against their validation criteria and then changes allFieldsValid to true once each field meets validation criteria.
export function dataset1_itemValuesChanged ( ) {
let firstValid = $w ( “#input4” ). valid
let lastValid = $w ( “#input5” ). valid
let businessValid = $w ( “#input6” ). valid
let emailValid = $w ( “#input7” ). valid
let phoneValid = $w ( “#input8” ). valid
let codeValid = $w ( “#input9” ). valid
if ( firstValid && lastValid && businessValid && emailValid && phoneValid && codeValid ) {
allFieldsValid = true
} else {
allFieldsValid = false
}
}

//This function triggers when the “Send” button is pressed.
export function button3_click ( event ) {
console . log ( “Button3 clicked” )
wixData . query ( “ReferralPartners” ) //Establishes a query on the ReferralPartners collection.
. contains ( “referralCode” , $w ( ‘#input9’ ). value ) //Query the collection for any items whose “Referral Code” field contains the value the user entered in the Referral Code Box (input 9)
. find ()
. then ( res => {
console . log ( “Ran the query for Referral Code” );
//Runs a conditional check to ensure an input exists, is valid, and that a matching value already exists in the database.
if ( res . length > 0 && $w ( ‘#input9’ ). value . length > 0 && $w ( “#input9” ). valid ) {
console . log ( “Referral code already exists.” );
session . setItem ( ‘passedData’ , $w ( ‘#input9’ ). value ) //Sets the referral code entered as data to pass to and display in the lightbox popup.
wixWindow . openLightbox ( “Referral Code Not Available” ) //Displays an error message in a lightbox popup that the referral code already in use.
} else {
//Runs a conditional check to see whether allFieldsValid = true.
if ( allFieldsValid ) {
console . log ( “Hooray! You have a new referral partner coming!” );
$w ( ‘#dataset1’ ). save () //Since the code exists, is valid, and is unique, and since all fields are valid, the form is submitted.
zapierWrapper () //See funtion as written above.
wixLocation . to ( “/referral-partner-confirmation” ); //Sends the user to a confirmation page after successfully submitting the form.
console . log ( “Save Done” );
} else {
wixWindow . openLightbox ( “Submit Error” ) //Displays an error message in a lightbox popup that one or more fields is not valid.
console . log ( “Validation not met.” )
}
}
})
}

I do not work with the package, I do it directly thru webhook, so my comment comes with some reservations, but I see a difference in import ((0 , zapier_integration_backend.postToZapier) and error (@velo/zapier-integration-backend). Note the diff between dashes and underscores.

EDIT: other way around, but observation stays the same

Thanks for your response! I actually resolved the issue this morning and will post the solution in another comment for future folks who encounter this issue.

I noted the difference in the import and error as well, and it’s odd, because it is actually supposed to be written with dashes, not underscores, so my code (at least that portion of it) was correct, even though the error displays underscores for whatever reason.

SOLUTION:

After installing the Zapier integration package, I placed the following code in a new Backend module. For the purpose of this comment, let’s say it’s called “zapier-integration.jsw”.

import  {  postToZapier  }  from  '@velo/zapier-integration-backend' ; 

**export async function**  zapierWrapper ( zapierSecretUrl ,  bodyObject ) { 
		postToZapier ( zapierSecretUrl ,  bodyObject ) 
		console . log ( "Sent to Zapier" ) 
}; 

Then, on the front end page code, where I had originally written:
import { postToZapier } from ‘@velo/zapier-integration-backend’;
instead, write:
import { zapierWrapper } from ‘backend/zapier-integration.jsw’ ;

Then, we can call the zapierWrapper function in the body of the code as follows:
zapierWrapper ( “zapierNewReferralPartner” , { //Replace zapierNewReferralPartner with the name of your secret.
“first_name” : $w ( “#input4” ). value ,
“last_name” : $w ( “#input5” ). value ,
//etc…
});

Once I finally got it working, I hit another road block in that Zapier places all the information from the zapierWrapper function in one “raw_body” output. So I added an action step in Zapier using the native “Code by Zapier” app with the following JS in it to parse each collected category into its own field:

const result = JSON.parse(inputData.rawBody);  
return {result: result}; 

The final result after a multiple day struggle: bliss.

That’s the spirit, try, try and work it out. Kudo’s, that’s exactly how we all did it: stumble, fall, pick yourself up. Great job.

Hey Todd, I would like to know after “Code by Zaper” setp, how did you get the result printed on console OR text box?

My zap is running fine and I would like to print the results from zap back onto the console. I am stuck at the above step buddy!

Do you mean like, if you send them to a confirmation page and use information from their inputs as replacements for text boxes? If so, I’d try this:

On the first page, be sure you have:

import { session } from 'wix-storage';
import wixLocation from 'wix-location';

Then, wherever makes sense in your code…

export function button_click(event) { //be sure to replace "button" with the name of the button you're using and add an onClick() event handler.
    session.setItem('variableOne', $w('#input1').value)
    //Continue to add "session.setItem() functions for each item you want to     pass to the next page.
    wixLocation.to("/second-page");
}

In this code, be sure to replace:

  1. “button” with the name of the button you’re using and add an onClick() event handler,
  2. “variableOne” with whatever name makes sense for you to pass to the next page and “input 1” with the name of the actual input you’re passing on to the next page, and
  3. “/second-page” with the name of the confirmation page you’re sending them to.

On the second page, be sure you have:

import { session } from 'wix-storage';

Create an empty text box that will be filled by your code, but set the styling from within the regular editor. Let’s say this is called ‘#text1’.

$w.onReady(function () {
    const userName = session.getItem('variableOne');
    $w('#text1').text = "Thanks for your inquiry, "
    + userName
    + "! We'll be in touch soon!"
});

Again, “variableOne” will be whatever you named in the “session.setItem()” function(s) on the first page. And obviously, replace the text with whatever you’d actually like the content to say.

Let me know if all of that works for you!

If that doesn’t work right, try replacing that last code block with the following:

$w.onReady(function(){
    const userName = session.getItem('variableOne');
    $w('#text1').text ="Thanks for your inquiry, ${userName}! We'll be in touch soon!"
});

@todd57814 Let me give you more details about what I am trying to achieve. Here is the flow:

  • User clicks a button on wix website (working fine)
  • This triggers a zap (working fine)
  • Zap create a new server in DigitalOcean (working fine)
  • Once zap is done, I wan to print server details in a text box on website (Not sure)

So post zap is finished, I want to capture the json data (output of zap) and print into a text box.

I’m not so sure there’s a way to print data to your website using the output of a Zap. I’m also not familiar with DigitalOcean.

If you can know in advance what the server details will be prior to running the Zap, I’d just append those details to a database in Wix and pull that information into your text box.

Unfortunately, I think that’s the best help I can offer. I’m not a professional developer and even something as simple as the Zapier code above took me, like, 2 weeks to research and write.

@todd57814 even i have done the same thing and api call is also happening, but not able to see the zaps in zap history. Can you give a quick steps to setup zap via webhooks ?

@shivam Loom | Free Screen & Video Recording Software | Loom