1. Clone the Example Webflow Project: Clone the example Webflow site where scripts will be applied.
2. Publish the site: Publish the site and explore it in your browser.
3. Navigate to the “Pointer Tracking” example: The page will have an overview description of the example, and instructions on how to implement the code. In our finished version, once custom code is applied to the page, the “Pointer Tracking” example will show an animation that follows your pointer across the page.

Without Custom Code

With Custom Code

1. Clone the Project Repository Run the following commands in your IDE to clone the example repository and install dependencies:

   Bash

   $
   git clone https://github.com/Webflow-Examples/custom-code-examples/tree/main
   $
   cd custom-code-examples
   $
   npm install
   $
   npm run install-project

2. Configure Environment Variables Fill out a .env file with the necessary environment variables:

   .env

   1
   WEBFLOW_CLIENT_ID=YOUR_CLIENT_ID
   2
   WEBFLOW_CLIENT_SECRET=YOUR_CLIENT_SECRET
   3
   NGROK_AUTH_TOKEN=YOUR_NGROK_AUTH_TOKEN
   4
   PORT=8080

1. Start the Project Run the following command in your IDE to start the project:

   Bash

   $
   npm run dev

2. Update App’s Redirect URI Once the server is running, copy the Redirect URI provided in the terminal. Navigate to your Webflow Workspace dashboard, go to “Apps & Integrations,” and update the Redirect URI in your App settings. Save the changes.

   Terminal Output

   Update App Redirect URI

   

3. Authorize App We’ll need to authorize the App to access the newly cloned example site. We’ve already set up the authorization flow in this example App. Navigate to localhost:8080 and choose the workspaces or sites you want your App to access. Once authorized, you’ll be redirected to the App’s frontend.

   To see how we configured authorization for this App, navigate to the backend folder and review controllers/authController.js, routes/authRoutes.js, and webflowClientMiddleware.js. For more information on setting up authorization, read through our authorization guide.

In this step, you will register scripts necessary for implementing custom functionality on your Webflow site. The App provides three example scripts that correspond to functionalities you can implement on the example site. We’ll start with Pointer Tracking, a script that enables an animation to follow your pointer around on the screen. We’d like to give Jeff McAvoy at RiveFlow a special thanks for contributing this example to the Webflow developer community.

1. Choose the Pointer Tracking Example
   From the list of example scripts, select “Pointer Tracking.” Once selected, you’ll see a list of scripts to register that are marked inline or hosted.

   Hosted Scripts

   Inline Scripts

   Hosted scripts require a hostedLocation (the URL where the script is hosted) and an integrityHash to verify the script’s contents.

   The following controller logic in the example app automates this process:

   • it fetches the script from the hostedLocation
   • generates an integrityHash to ensure the script hasn’t been tampered with
   • and then uploads this information to the Webflow endpoint.

   This verification step ensures the script’s integrity before it’s applied to your Webflow site.

   backend/controllers/scriptController.js

   1
   export const registerHostedScript = async (req, res) => {
   2
     try {
   3
       const siteId = req.params.siteId;
   4
   5
       async function generateSRI(url) {
   6
         const response = await fetch(url);
   7
         const data = await response.text();
   8
         const integrity = Sri(data, ["sha256"]);
   9
         return integrity;
   10
       }
   11
   12
       const hostedLocation = req.body.hostedLocation;
   13
       const integrityHash = await generateSRI(hostedLocation);
   14
   15
       const script = {
   16
         hostedLocation: hostedLocation,
   17
         integrityHash: integrityHash,
   18
         canCopy: true,
   19
         version: req.body.version,
   20
         displayName: req.body.displayName
   21
       };
   22
   23
       const data = await req.webflow.scripts.registerHosted(siteId, script);
   24
       res.json(data);
   25
     } catch (error) {
   26
       console.error("Error registering hosted script:", error);
   27
       res.status(500).send("Failed to register hosted script");
   28
     }
   29
   };

2. Provide script details
   To upload a script via the API, you’ll need to provide the following details:

   • displayName (string): The name of your script
   • version (string): The semantic version of your script. Each script must have a unique combination of displayName and version. You cannot overwrite scripts at this time.
   • canCopy (Boolean): Define whether the script can be copied on site duplication and transfer

   For the example we’ve already included the hostedLocation if it’s a hosted script, or the sourceCode if it’s an inline script.

3. Click register
   Depending on the type of script, inline or hosted, this button will send your script to the backend server, and then to the appropriate Webflow endpoint.

   • POST https://api.webflow.com/v2/sites/{site_id}/registered_scripts/inline
   • POST https://api.webflow.com/v2/sites/{site_id}/registered_scripts/hosted

4. Once you’re finished registering your scripts, click the “Next” button.

Now that a script has been registered to the Webflow site, you can use the API to apply scripts to either the entire site or a specific page. In this step, you will apply each script to the appropriate page for the chosen example.

Scripts can be applied to one of two locations:

• Header: Within the <head> tag.
• Footer: Right before the closing </body> tag.

1. Select a Page Choose the page where you’ll apply the script. For this example, we’ll select the “Pointer Tracking” page.

2. View Registered Scripts You will see a list of scripts that have been registered to your site, populated by the Get Scripts endpoint.

   • The list includes the script ID, version, and hostedLocation.
   • Note that even inline scripts have hostedLocation URLs, as Webflow uploads these scripts to its CDN for serving.

3. Apply Scripts

   • Header: Apply the Rive.js script to the header.
   • Footer: Apply the pointer-tracking.js script to the footer.

   To apply the scripts we’ve registered to the page, we’ll use the Add/Update Custom Code endpoint. This endpoint requires you to add all custom code blocks to the page. Therefore, we’ll also use the Get Custom Code endpoint to retrieve any existing applied scripts, also known as custom code blocks, and upload a complete list of code that should be on the site.

   We’ve applied this logic in our example app in backend/controllers/scriptControllers.js

   JavaScript

   1
   export const upsertPageCustomCode = async (req, res) => {
   2
     const pageId = req.params.pageId;
   3
     const { selectedScript, version } = req.body;
   4
   5
     const applyScripts = async (scriptApplyList) => {
   6
       try {
   7
         const data = await req.webflow.pages.scripts.upsertCustomCode(pageId, scriptApplyList);
   8
         res.json(data);
   9
       } catch (error) {
   10
         console.error("Error adding/updating page-level custom code:", error);
   11
         res.status(500).send("Failed to add/update page-level custom code");
   12
       }
   13
     };
   14
   15
     try {
   16
       const response = await req.webflow.pages.scripts.getCustomCode(pageId);
   17
       const existingScripts = response.scripts || [];
   18
       const newScript = {
   19
         id: selectedScript,
   20
         location: req.query.location,
   21
         version: version,
   22
       };
   23
       existingScripts.push(newScript);
   24
       const scriptApplyList = {
   25
         scripts: existingScripts,
   26
       };
   27
   28
       console.log(scriptApplyList);
   29
       await applyScripts(scriptApplyList);
   30
     } catch (error) {
   31
       console.error("Failed to fetch scripts", error);
   32
       const scriptApplyList = {
   33
         scripts: [
   34
           {
   35
             id: selectedScript,
   36
             location: req.query.location,
   37
             version: version,
   38
           },
   39
         ],
   40
       };
   41
       await applyScripts(scriptApplyList);
   42
     }
   43
   };

4. Bonus: Check the Page in the Designer
   The Webflow Designer allows users to see how apps integrate code into their sites. After applying a script to a site or page, you can view it in the Designer’s settings.

   • Open the Webflow Designer.
   • Go to the page settings for “Pointer Tracking.”
   • Scroll down to the Custom Code section to see the script your app added.
   

Before you can see your scripts in action, you’ll need to publish your entire site. Click the “Publish Site” button to publish your site using the Publish Site endpoint.

Once your site is published, click “View Page” to go directly to your Pointer Tracking page. You should now see a fun animation that follows your pointer around the page.