Connecting WebFlow to Stage

I started by creating a page on Webflow for pricing and styled the components

Then I gave each spot I wanted updated an id. This will allow me to change the values of them using javascript.

I now need to go to the page’s script. In WebFlow go to the pages tab, highlight the pricing page, and click the cog button.

Scroll down and you find the Custom Code section. This is where we will add the code that gets data from Stage and adds the data to the components.

Here is a good starting script:

<script>
	const authToken = "";
	var request = new XMLHttpRequest();
	const identifier = "your_company_identifier";

	request.open(
		"GET",
		`https://api.heystage.dev/sdk-api/organizations/${identifier}/plans`,
		true
	);
	request.setRequestHeader("Authorization", "Bearer " + authToken);

	request.onload = function () {
		var data = JSON.parse(this.response);

    if (request.status >= 200 && request.status < 400) {

    } else {
      console.log("error");
    }
  };

  request.send();
</script>

You can see that we need two things here.

Your companies identifier (this will not be necessary soon)
Your Auth Token

Getting your Auth Token is a simple task in Stage. Login to Stage from https://app.heystage.com and go to the Developers tab. Now click the "Generate API key" button.

Select "Read" as your key permission and click on "Generate key".

In the table there will now be a token. Hover over it and click the copy button.

Now add your key to the script in WebFlow and you are connected. Here's an example of my script for just updating all three plan names.

<script>
	const authToken = "auth_token";
	var request = new XMLHttpRequest();
	const identifier = "stage_technologies";

	request.open(
		"GET",
		`https://api.heystage.dev/sdk-api/organizations/${identifier}/plans`,
		true
	);
	request.setRequestHeader("Authorization", "Bearer " + authToken);

	request.onload = function () {
		var data = JSON.parse(this.response);

    if (request.status >= 200 && request.status < 400) {
      const plans = data?.plans?.items;
      const sorted = plans.sort((x, y) => {return x.monthlyUnitAmount - y.monthlyUnitAmount})

      sorted.forEach((p, index) => {
        const planName = document.getElementById(`plan-name-${index}`)
        planName.textContent = p.name
      });
    } else {
      console.log("error");
    }
  };

  request.send();
</script>

And here is the whole thing:

<script>
	const formatCost = (value) => {
        if (value === 0) {
            return "Free"
        } else {
            return `$${value/1000}`
        }
    }

	const authToken = "auth_token";
	var request = new XMLHttpRequest();
	const identifier = "stage_technologies";

	request.open(
		"GET",
		`https://api.heystage.dev/sdk-api/organizations/${identifier}/plans`,
		true
	);
	request.setRequestHeader("Authorization", "Bearer " + authToken);

	request.onload = function () {
		var data = JSON.parse(this.response);

    if (request.status >= 200 && request.status < 400) {
      const plans = data?.plans?.items;
      const sorted = plans.sort((x, y) => {return x.monthlyUnitAmount - y.monthlyUnitAmount})

      sorted.forEach((p, index) => {
        const featureContainer = document.createElement("div");
        const cost = formatCost(p.monthlyUnitAmount)

        p.features.items.forEach((f) => {
          const feature = document.createElement("p");
          feature.classList.add("feature");
          feature.textContent = f.limit ? `${f.limit} ${f.name}` : f.name;
          featureContainer.append(feature);
        });

        const planName = document.getElementById(`plan-name-${index}`)
        planName.textContent = p.name

        const description = document.getElementById(`description-${index}`)
        description.textContent = p.description

        const price = document.getElementById(`price-${index}`)
        if (cost === "Free") {
        	price.style.width = "100%"
          price.style.textAlign = "center"
        }
        price.textContent = formatCost(p.monthlyUnitAmount)

        const units = document.getElementById(`price-units-${index}`)
        if (cost === "Free") {
        	units.style.width = "0%"
        }
        units.textContent = cost === "Free" ? "" : "/mo"

        const features = document.getElementById(`feature-list-${index}`)
        features.innerHTML = ''
        features.appendChild(featureContainer)
      });
    } else {
      console.log("error");
    }
  };

  request.send();
</script>