Custom Code

Adding custom code to a site can significantly enhance its functionality and user experience by unlocking the power of JavaScript to create interactive sliders, pop-ups, form validations, and more. You can also use custom code to integrate third-party services, like analytics tools, chatbots, or social media feeds, seamlessly into your site.

This step-by-step guide will show you how to add custom scripts, to your site using the API. This opens up a world of possibilities, allowing you to use powerful frameworks like GSAP and create interactive features that will make your site stand out from the crowd.

See this recipe for a full code example.

🦉

Open Recipe

Step 1: Creating your script

First, you'll need to prepare the script you want to add to your Webflow site. Here are some requirements your script should meet:

In-line scripts should be within 0 to 2000 characters.
The displayName of your script should be alphanumeric and its maximum length is 50 characters.
Provides a subresource integrity hash for hosted scripts

Don't worry about enclosing your code within <script> tags - Webflow will take care of that for you.

Step 2: Registering your script

Before a script can be added to a site, it needs to be registered with Webflow. Depending on where your script is located, you can choose between two types of registration: Hosted or Inline scripts:

📘
Subresource Integrity
Subresource Integrity (SRI) enables browsers to verify that resources they fetch - say from a CDN - are delivered without unexpected manipulation. It works by allowing the resource owner to provide a cryptographic hash that a fetched resource must match.
When using a hosted script, you'll need to include a subresource integrity hash for externally hosted scripts. This ensures that the file your website fetches has not been tampered with and is exactly the file you expect.

Hosted Scripts: If your script is hosted remotely, you can register it using the following endpoint:

const axios = require('axios');

axios.post('<https://api.webflow.com/beta/sites/{site_id}/registered_scripts/hosted>', {
    hostedLocation: 'your_script_location',
    integrityHash: 'your_integrity_hash',
    canCopy: false,
    version: 'your_script_version',
    displayName: 'your_script_name'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Inline Scripts: If your script is an inline script, you can register it using this endpoint:

const axios = require('axios');

axios.post('<https://api.webflow.com/beta/sites/{site_id}/registered_scripts/inline>', {
    // Your script details here
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Remember, you can only register one script at a time.

Step 3: Adding the Script to your Site

Once your script is registered, it's time to add it to your site. To do this, make a PUT request to the following endpoint:

const axios = require('axios');

axios.put('<https://api.webflow.com/beta/sites/{site_id}/custom_code>', {
    scripts: [
        {
            id: 'cms_slider',
            location: 'header',
            version: '1.0.0'
        },
        {
            id: 'alert',
            location: 'header',
            version: '0.0.1'
        }
    ]
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

You can specify whether the script should be placed in the <head> or <footer> of your site in the request body. You can add multiple scripts to a site at a time via an array in the payload.

Step 5: Checking your work

To make sure your script has been registered and added correctly, you can check all registered scripts that have been applied to your site. Use the following endpoint:

const axios = require('axios');

axios.get('<https://api.webflow.com/beta/sites/{site_id}/custom_code>')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Step 6: Testing your Script

After adding your custom script, it's time to unveil your enhanced site to the world. Remember to publish or re-publish your site for the changes to take effect. You can do this through the Webflow interface, or the Publish Site endpoint.

To test the functionality of your script, visit your published site and interact with it. If your script is designed to create visible changes, you should be able to see them. If it's designed to work behind the scenes, you might need to use developer tools to check its functionality.

Troubleshooting

If you encounter any issues while following this guide, here are a few things to check:

Make sure your script meets all the requirements mentioned in Step 1.
Check that you've replaced {site_id} with your actual site ID in all the endpoints.
Make sure your site has been published after adding the script.

If you're still having trouble, don't worry! The Webflow community and support team are here to help. Happy coding!