How can I grab a Webflow collection based on its ID and store it in a variable? Can someone provide a snippet or example image? Also, is there a way to link embedHTML on the same page to share or access variables from each other (top-bottom)?

Accessing a Webflow collection by ID and storing it in a variable involves using Webflow's CMS API and JavaScript. Here's how you can approach this.

​

1. Access Webflow Collection Using API

​

• Set Up API Token: First, ensure you have generated an API access token from your Webflow dashboard.
• API Endpoint: Use the endpoint https://api.webflow.com/collections/{collectionId}/items to access collection items.
• Fetch Data with JavaScript: Use a fetch request in JavaScript to get the data.

​

2. JavaScript Example

​

You cannot include raw code blocks, but conceptually, you'd:

​

• Make an API Call: Use fetch to call the Webflow API with the collection ID.
• Store in a Variable: Parse the response and store it in a JavaScript variable.

​

For example: 

• Request headers will need to include your access token and the Accept-Version: 1.0.0.
• Use fetch to retrieve the collection data and then to handle the response.

​

3. Share Variables Across embedHTML on Same Page

​

• Use Global Variables: Declare global variables before any embed code. These can be accessed and modified by any embed block on the page.
• Linking Embeds: Initialize a variable at the top of the page in a script tag. All embedded HTML blocks can reference this variable.

​

Summary

​

To access a Webflow collection based on its ID, utilize the Webflow CMS API and fetch the desired data, storing it in a JavaScript variable. Global variables help keep data available across multiple embedHTML sections on a page. Be sure to manage access via API tokens securely.