This guide will demonstrate how to add custom code to a pre-configured example site. You will learn how to register scripts to a site, apply them to a page, and publish the site, illustrating the complete process of managing scripts via the API.

Prerequisites

A clone of our Code Example Site.

A Webflow App or a Site Token with the following scopes: sites:read, sites:write, pages:read, pages:write, custom_code:read, and custom_code:write

An ngrok account and authentication token. We use ngrok to set up a secure tunnel for our App.

1. Clone the Example Site

2. Setup the Development Environment

3. Start and Authorize Your App

4. Register Scripts

5. Apply Scripts

6. Publish and View Your Site

Next Steps

Awesome! Now that you’ve got the hang of custom code, here are some other cool things you can do:

Apply More Examples: Use the app to explore and apply more example scripts.
Add Your Own Custom Code: Use the API to add your own custom code examples and see them in action on your Webflow site.

Keep experimenting and enhancing your Webflow site with custom scripts!