1

🛠️ Initiate the Village JS SDK

Copy the snippet below and add it within the <head> tag The unique user identifier should be unique - such as an email, or an internal ID. This is required for you to later on be able to cancel users from being added to your upcoming bill.

<script>
 (function(){var w=window;var d=document;var v=w.Village||{};d.head.appendChild(Object.assign(d.createElement("style"),{textContent:'[village-paths-availability="found"],[village-paths-availability="not-found"]{display:none}'}));v.q=v.q||[];v._call=function(method,args){v.q.push([method,args])};v.init=function(){v._call("init",arguments)};v.identify=function(){v._call("identify",arguments)};w.Village=v;var l=function(){var s=d.createElement("script");s.type="text/javascript";s.async=true;s.src="https://js.village.do";var x=d.getElementsByTagName("script")[0];x.parentNode.insertBefore(s,x)};if(w.Village.loaded)return;if(w.attachEvent){w.attachEvent("onload",l)}else{w.addEventListener("load",l,false)}w.Village.loaded=true})();
	Village.init('VILLAGE_PUBLIC_KEY');
	Village.identify('YOUR_UNIQUE_USER_IDENTIFIER')
</script>
2

✨ Add the “Find intro” button

Add village-data-url attribute to any html element, and Village automatically adds an onclick event that triggers the paths experience. If the user hasn’t synced their connections yet, they’ll be prompted to authorize Village and then sync their connections.

<!-- FINDS PATHS TO A PERSON OR COMPANY -->
<!-- URL could be a person's linkedin URL, a company URL, or a LinkedIn company page -->
<button village-data-url="https://google.com">
  <!-- Change button contents depending on found paths -->
	<span village-paths-availability="found">
		<!-- Auto-populate faces of introducers inside this -->
    <span village-paths-data="facepiles"></span>
    <!-- Auto-populate the number of paths inside this -->
    <span village-paths-data="count"></span> paths found
	</span>
	<span village-paths-availability="not-found">Find an intro</span>
	<span village-paths-availability="loading">Loading...</span>
</button>
3

🎉 Go live!