### Example Rendered HTML with Custom Class
Source: https://www.framer.com/help/articles/how-to-add-a-custom-class-to-an-element
This is an example of how an element's HTML will appear after the custom class has been applied via the override.
```html
...
```
--------------------------------
### Node.js Webhook Server with Signature Verification
Source: https://www.framer.com/help/articles/framer-form-webhook-setup
This example demonstrates a basic Node.js HTTP server that listens for POST requests on the /webhook endpoint. It includes logic to parse the request body, extract the Framer signature and submission ID, and verify the signature using a shared secret. Ensure your WEBHOOK_SECRET matches the one configured in Framer.
```javascript
const http = require('http');
const crypto = require('crypto');
const WEBHOOK_SECRET = 'your_webhook_secret';
function isWebhookSignatureValid(secret, submissionId, payloadBuffer, signature) {
if (signature.length !== 71 || !signature.startsWith('sha256=')) return false;
const hmac = crypto.createHmac('sha256', secret);
hmac.update(payloadBuffer);
hmac.update(submissionId);
const expectedSignature = 'sha256=' + hmac.digest('hex');
return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expectedSignature));
}
const server = http.createServer((req, res) => {
if (req.method === 'POST' && req.url === '/webhook') {
const bodyChunks = [];
req.on('data', chunk => bodyChunks.push(chunk));
req.on('end', () => {
const body = Buffer.concat(bodyChunks);
const signature = req.headers['framer-signature'];
const submissionId = req.headers['framer-webhook-submission-id'];
if (!signature || !submissionId || !isWebhookSignatureValid(WEBHOOK_SECRET, submissionId, body, signature)) {
res.writeHead(500);
return res.end('Invalid signature');
}
res.writeHead(200);
res.end('Webhook received');
});
req.on('error', () => {
res.writeHead(500);
res.end('Server error');
});
} else {
res.writeHead(404);
res.end();
}
});
server.listen(3000, () => {
console.log('Server listening on ');
});
```
--------------------------------
### Immediate Editor Warning Example
Source: https://www.framer.com/help/articles/how-to-fix-nested-links-optimization-warning
This message appears directly in the Framer editor when nested links are detected, preventing publishing until resolved.
```text
This layer’s parent already contains a layer with a link. Unset it to fix this issue
```
--------------------------------
### Add Trustpilot Script to Site Settings
Source: https://www.framer.com/help/articles/how-to-embed-trustpilot-widget-into-your-website
Place this script in the Custom Code section at the start of the tag in your site's general settings. This script is essential for loading the Trustpilot widget functionality.
```html
```
--------------------------------
### Add Google Tag Manager body code to Framer site
Source: https://www.framer.com/help/articles/how-to-add-google-tag-manager-to-your-site
Add the GTM body code snippet to the start of the `` section of your Framer site. This is the second part of the GTM installation process.
```html
```
--------------------------------
### Generate New Plugin Zip
Source: https://www.framer.com/help/articles/plugin-version-already-exists
Run this command to create a new zip file for your plugin after making code changes. This ensures a unique version for uploading.
```bash
npm run pack
```
--------------------------------
### Post-Publishing Optimization Warning Example
Source: https://www.framer.com/help/articles/how-to-fix-nested-links-optimization-warning
This warning is shown after publishing, indicating nested links found in CMS content, components, or overrides. Framer automatically replaces these with placeholders.
```text
/page
* [warning] Nested link detected on layer About due to layer Header
```
--------------------------------
### Simulate AI Agent Request (User-Agent)
Source: https://www.framer.com/help/articles/make-site-readable-by-ai-agents
Use this command to simulate a request from an AI agent like GPTBot. This helps verify how your site is perceived by crawlers that do not execute JavaScript.
```bash
curl -A "GPTBot/1.0"
```
--------------------------------
### Add Google Tag Manager code to Framer site
Source: https://www.framer.com/help/articles/how-to-add-google-tag-manager-to-your-site
Add the GTM code snippet to the `` section of your Framer site. This is the first part of the GTM installation process.
```html
```
--------------------------------
### Request Markdown Content via Accept Header
Source: https://www.framer.com/help/articles/make-site-readable-by-ai-agents
AI agents can request a markdown version of your page by including the `Accept: text/markdown` header. This command demonstrates how to make such a request.
```bash
curl -H "Accept: text/markdown"
```
--------------------------------
### Cloudflare Worker to Proxy Requests to Framer
Source: https://www.framer.com/help/articles/how-to-proxy-with-cloudflare
Use this JavaScript code in your Cloudflare Worker to forward incoming requests to your Framer subdomain. Replace the example URL with your actual Framer domain.
```javascript
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const url = new URL(request.url);
return fetch('https://my-company.framer.website' + url.pathname + url.search, {
method: request.method,
headers: request.headers,
body: request.body,
});
}
```
--------------------------------
### Import CMS Collection Module Directly (Unsupported)
Source: https://www.framer.com/help/articles/issues-with-code-components-accessing-the-cms
This code illustrates an unsupported method of importing a CMS collection module directly. Direct imports like 'import collection from "../collection/qE6RTvUxt"' are no longer permitted.
```javascript
// The variable below has changed and is NOT supported.
import collection from "../collection/qE6RTvUxt"
```
```javascript
// The variable below has changed and is NOT supported.
import collection from "../collection/qE6RTvUxt"
```
```javascript
// The variable below has changed and is NOT supported.
import collection from "../collection/qE6RTvUxt"
```