Code injection into ResponsiBid is already possible, and you can learn more about the basic things you can do such as CSS, HTML, and even JavaScript changes here. It’s advanced and for those who have the knowledge to do such a thing, you can do really specific changes.

But now there’s more.

ResponsiBid has several webhooks that can be used by your code injection to perform all sorts of actions. These are advanced methods that we cannot internally provide services custom coding for, but we have decided to make these available to our advanced users so that they can accomplish different things. Some examples of what you might want to accomplish (but by no means exhaustive):

  • Collect payment from customers on your own landing page and therefore your own payment processor.
  • Send data throughout the bidding or proposal process to your own sources.
  • Measure other analytics (See our Google Analytics article).
  • Change their user’s experience.

The events that can be tracked and used by webhooks are:

  • When a bid form loads up
  • When a bid is begun (either Lightbox or Smartform)
  • When a Smartform bid is begun
  • When a Lightbox bid is begun
  • When a bid is submitted (either Lightbox or Smartform)
  • When a Smartform bid is submitted
  • When a Lightbox bid is submitted
  • When a proposal is accepted (Step 1 = pending)
  • When a proposal is scheduled (Step 2 = scheduled by a customer)

ResponsiBid installs onto your web page (the parent window) as a “webpage inside of your webpage” (iFrame). The above linked Google Analytics article shows you how you can make these events available to your parent window, but this article is focused on how you can make your iFrame directly use these webhooks to perform your needed functions… usually inside of the iFrame.

 

Step 1 – Which Webhooks You Have Access To

Before we share examples with you, please be advised of the hooks you can use, and what they represent in the customer journey.

Here is a list of the events possible:

1.) First service selected (Bid has started):

bid.services.first_selection (This call will send regardless of smartform or lightbox use)
smartform.services.first_selection (This call will send only if it looks like someone has begin filling out the smartform)
lightbox.services.first_selection (This call will send only if it looks like someone has begin filling out the lightbox)

This event triggers only when a customer is getting a bid and selects their first service. This should be a good indication that the customer has started the bidding process. You can listen for a generic start of the bidding process, or if you like to specifically listen to a lightbox start or a smartform start, you can do that. NOTE: You can listen for both the smartform and the lightbox start on the same page and that’s totally fine too.

2.) New bid being submitted (Bid is submitted):

bid.submitted (This call will send regardless of smartform or lightbox submission)
smartform.bid.submitted (This call will send only if someone has submitted the smartform)
lightbox.bid.submitted (This call will send only if someone has submitted the lightbox)

This event triggers only when the customer completes the bidding process and before they are redirected to the proposal. This is a good indication that the customer completed the bidding process. You can listen for a generic submission of the bidding process, or if you like to specifically listen to a lightbox start or a smartform submission, you can do that. NOTE: You can listen for both the smartform and the lightbox submission on the same page and that’s totally fine too.

3.) Customer ready to schedule (Proposal is Confirmed):

proposal.step_1.confirm.click (This call will track if the visitor to your website has indicated that they want to schedule a job)

This event triggers when the customer has completed the first step of the proposal in which the selected at least 1 package and have agreed to the proposal. This is a good indication that they are ready to schedule.

4.) Customer has scheduled (Proposal is Scheduled):

proposal.step_2.confirm.click (This call will track if the visitor to your website has actually scheduled a job)

This event triggers when the customer has completed the proposal with at least 1 selected service and has scheduled themselves based on your settings. This is a good indication that the sale is completed.

Example:

In the following example, we are listening for the “proposal confirmed” webhook, and then opening a new page instead of the scheduling page:

<script>
ResponsiBidProposalWebhooks.on('proposal.step_1.confirm.click', function(data) {
    window.location.href = 'https://google.com';
    return true;
});
</script>

So this simple example would listen for the proposal to be confirmed and then take you to google.com (or you could make it your own landing page of course). Pretty cool.

But not quite everything, you would need if you wanted to pre-fill out portions of a form using what we know about the customer… which brings us to step 2…

Step 2 – Bring Along Customer Information That We Would Know at This Point

Another thing you can do at this point is retrieve from the data passed in everything you need to know about the customer. Here’s some example fields you have access to:

  • data.contact.first_name
  • data.contact.last_name
  • data.contact.company_name
  • data.contact.email
  • data.contact.phone1
  • data.contact.phone2
  • data.contact.street1
  • data.contact.street2
  • data.contact.zip
  • data.services (can get an array including names of packages selected)

For a full list of items simply a console log output and you’ll see all the items available. As an example you could do something like this:

<script>
ResponsiBidProposalWebhooks.on('proposal.step_1.confirm.click', function(data) {
    console.log('interecepted schedule click', data);
});
</script>

Now you can use your creativity to do whatever you want! The world is your oyster!