Bayou embedded component

This page outlines how to embed Bayou's customer onboarding form into your product or website.

You can embed Bayou’s customer onboarding form on your website using the Bayou JS library. To include and initialize the library, add the following line to your pages:

<script src="https://js.staging.bayou.energy/v1"></script>
<script src="https://js.bayou.energy/v1"></script>

📘

This is version 1 of the embedded component, reflected by v1 in the above code. Do not confuse this with v2.0 and v1.0 of Bayou's API.

Next, in your JavaScript code, add the following lines of code:

Bayou.loadOnboardingForm(  
 document.getElementById("\<your_element>"),  
"\<your_company_id>", // Found in your company settings: https://bayou.energy/dashboard/settings 
"\<onboarding_token>", // Generated using this API call: https://docs.bayou.energy/v2.0/reference/get_customers-id 
 (event) => { if(event.type === "bayouCustomerFinishedOnboarding") { alert("Customer has completed the form") } }  
 )

Bayou.loadOnboardingForm(  
 document.getElementById("\<your_element>"),  
"\<your_company_id>", // Found in your company settings: https://staging.bayou.energy/dashboard/settings 
"\<onboarding_token>", // Generated using this API call: https://docs.bayou.energy/v2.0/reference/get_customers-id 
 (event) => { if(event.type === "bayouCustomerFinishedOnboarding") { alert("Customer has completed the form") } }  
 )

📘

In the above JavaScript code snipped, replace

<your_element> by the identifier of the HTML element which will contain the onboarding form

<your_company_id> by the ID of your company, which you can find on the Settings page of your Bayou Dashboard

<onboarding_token> by the onboarding token for the current customer, which you can generate using the /customers/{id} API request.

The last parameter of the function is a callback function which will be called once your customer has reached the end of the onboarding form, with the following object passed as its first parameters:

{ type: "bayouCustomerFinishedOnboarding" }

We advise you to check the type of the event (“bayouCustomerFinishedOnboarding”) as we might add more types in the future.

🚧

If you are testing the embedded component in your local environment, remember that not all browsers will simply open a local file rendering the component.

Firefox should open and render the component locally without any issues but Safari and Chrome may require a local url: (for example: http://localhost:XXXX or http://localhost:8000