Integrating With Reach (CRM)

This guide will show you how to integrate your RealtyNinja website with your Reach CRM account.

1. COPY the entire code block below:

<script>
const publicKey = "YOURKEYHERE";
const webhookUrl = "https://us-central1-reach-crm.cloudfunctions.net/captureExternalLead";

function sendToReach(payload) {
  fetch(webhookUrl, {
    method: "POST",
    mode: "no-cors",
    headers: { "Content-type": "application/json; charset=UTF-8" },
    body: JSON.stringify({ ...payload, publicKey }),
  });
}

function getFormValue(form, name, prop) {
  const element = form.querySelector(`[name="${name}"]`);
  if (!element) {
    return;
  }
  if (prop === "checked") {
    return element.checked || false;
  }
  return (element.value || "").trim();
}

// Forms 1,2,3
function handleListingForm() {
  const form = document.getElementById("listingleadform");

  const name = getFormValue(form, "name");
  const email = getFormValue(form, "email");
  const phone = getFormValue(form, "phone");
  const comments = getFormValue(form, "comments");
  const requestShowing = getFormValue(form, "request-showing", "checked");
  const showingDate = getFormValue(form, "showingdate");
  const showingTime = getFormValue(form, "showingtime");
  let message = comments;
  if (requestShowing) {
    message = `${message}\nShowing Request: ${showingDate} ${showingTime}`;
  }

  const payload = {
    firstName: name,
    email,
    phoneNumber: phone,
    source: window.location.href,
    isBuyer: true,
    message,
  };

  sendToReach(payload);
}

// Forms 4,5
function handleBuyerSellerContactFrom() {
  const form = document.getElementById("bigcontactform");

  const type = getFormValue(form, "formtype");
  if (type !== "buyersform" && type !== "sellersform") {
    return;
  }
  const name = getFormValue(form, "name");
  const email = getFormValue(form, "email");
  const phone = getFormValue(form, "phone");
  const address = getFormValue(form, "address");
  const propertyType = getFormValue(form, "propertytype");
  const area = getFormValue(form, "area");
  const bedrooms = getFormValue(form, "bedrooms");
  const bathrooms = getFormValue(form, "bathrooms");
  const priceRange = getFormValue(form, "pricerange");
  const sqft = getFormValue(form, "sqft");
  const lotSize = getFormValue(form, "lotsize");
  const whenBuy = getFormValue(form, "whenbuy");
  const whenSell = getFormValue(form, "whensell");
  const message = getFormValue(form, "message");

  const values = {
    "Property Type": propertyType,
    Address: address,
    Area: area,
    Bedrooms: bedrooms,
    Bathrooms: bathrooms,
    "Price Range": priceRange,
    "Sq Ft": sqft,
    "Lot Size": lotSize,
    "When To Buy": whenBuy,
    "When To Sell": whenSell,
  };

  const valuesToAdd = Object.keys(values)
    .filter((key) => !!values[key])
    .map((key) => `${key}: ${values[key]}`);
  const fullMessage = [message, ...valuesToAdd].filter(Boolean).join("\n");

  const isBuyer = !!form.querySelector(`[name="whenbuy"]`);
  const isSeller = !!form.querySelector(`[name="whensell"]`);

  const payload = {
    firstName: name,
    email,
    phoneNumber: phone,
    source: window.location.href,
    message: fullMessage,
    isBuyer,
    isSeller,
  };

  sendToReach(payload);
}

// Form 6
function handleContactForm() {
  const form = document.getElementById("bigcontactform");

  const type = getFormValue(form, "formtype");
  if (type !== "contactform") {
    return;
  }
  const name = getFormValue(form, "name");
  const email = getFormValue(form, "email");
  const phone = getFormValue(form, "phone");
  const message = getFormValue(form, "message");

  const payload = {
    firstName: name,
    email,
    phoneNumber: phone,
    source: window.location.href,
    message,
  };

  sendToReach(payload);
}

// Form 7
function handleRegistrationForm() {
  const form = document.querySelector('form[name="account_registration_form"]');

  const name = getFormValue(form, "n");
  const email = getFormValue(form, "e");
  const phone = getFormValue(form, "t");

  const payload = {
    firstName: name,
    email,
    phoneNumber: phone,
    source: `${window.location.href} (New Account)`,
  };

  sendToReach(payload);
}

  $(function() {
    $('#listingleadform').on('submit',function() {
      try {
        handleListingForm();
      } catch(e){}
    });
    $('#bigcontactform').on('submit',function() {
      try {
        handleBuyerSellerContactFrom();
        handleContactForm();
      } catch(e){}
    });
    
    const waitForEl = function(selector, callback) {
	  if ($(selector).length) {
	    callback();
	  } else {
	    setTimeout(function() {
	      waitForEl(selector, callback);
	    }, 500);
	  }
	};
	
	waitForEl('form[name="account_registration_form"]', function() {
		$('form[name="account_registration_form"]').on('submit',function() {
      		try {
        		handleRegistrationForm();
      		} catch(e){}
    	});  
	});
  });
</script>

2. Login to your RealtyNinja website (yourwebsite.com/login)

3. In the backend of your RealtyNinja website, click "SETTINGS > CUSTOM CODE", then scroll to the "CUSTOM FOOTER CODE" section and PASTE in the code block you just copied.

Note: If you have existing code in the Custom Footer Code field, just paste this new code below it.

4. In a separate browser tab, log into your Reach CRM account.

5. In Reach, go to "SETTINGS > LEADS" and check the box that says "Enable External Lead Capture". Then click SAVE.

6. Then head over to "SETTINGS > INTEGRATIONS" and click "SHOW PUBLIC KEY". If there is no key, click on "Generate Key" to generate a new key. Click SAVE before continuing to the next step.

Note: For security reasons the demo below doesn't show the public key we generated.

7. Click the COPY icon next to your public key.

8. Go back to your RealtyNinja website tab, and scroll to the top of the "CUSTOM FOOTER CODE" section. You'll see a line that looks like this:

const publicKey = "YOURKEYHERE";

Replace the "YOURKEYHERE" part with the public key you copied from Reach, then scroll to the bottom of the page and click APPLY CHANGES.

9. That's it! Log out of your RealtyNinja account.

Testing the integration

We recommend doing a test or two to ensure everything is connected properly, and that you're familiar with how the integration works. 

To do that, simply fill in any lead form on your RealtyNinja website (such as a listing inquiry, buyer form, seller form or general contact form) pretending that you're a person inquiring from your website then check Reach CRM to see that the lead and contact shows up.

In Reach CRM, the leads first show up under "Leads > Captures".

Note: You'll also get a lead notification email letting you know there's a new lead.

From there you can click on a lead and perform actions on it such as:

• Change the lead type (will be set by default) to "Buyer" or "Seller"
• Set a lead score (hot, warm, cold)
• Archive
• Convert

Click "Convert" once you've confirmed a leads details and it will show up in the main "Buyers" or "Sellers" tab of your Leads page. From there you can continue to use all the great CRM functionality Reach provides.