Snippets

Snippets are reusable blocks of HTML, Liquid, or JavaScript that can be included across multiple pages and templates.

Create a Snippet

POST /api/v2/admin/snippets
Content-Type: application/json

{
  "Name": "Header",
  "Alias": "header",
  "Content": "...",
  "Enabled": true,
  "Description": "Main site header"
}

Important: Enabled Flag

Snippets default to Enabled=false! Always set "Enabled": true or the snippet will render as empty.

List Snippets

GET /api/v2/admin/snippets?Where=%7B%22%24and%22%3A%5B%7B%22%24eq%22%3A%7B%22Enabled%22%3Atrue%7D%7D%5D%7D&Order_By=Name

Update a Snippet

PUT replaces the entire snippet. Always include all fields:

PUT /api/v2/admin/snippets/{id}
Content-Type: application/json

{
  "Name": "Header",
  "Alias": "header",
  "Content": "Updated...",
  "Enabled": true,
  "Description": "Main site header"
}

Using Snippets in Templates

Reference snippets by alias using the component tag:


  
    
      
      WebinOne API Docs

Snippet Parameters

Pass custom parameters to snippets:

Common Use Cases

Header/Footer: Shared navigation and site structure
Meta Tags: Centralized SEO and social media tags
Scripts: Analytics, tracking, and third-party integrations
Structured Data: Schema.org JSON-LD markup
Components: Reusable UI elements (buttons, cards, modals)

Best Practices

Use descriptive aliases (lowercase, hyphen-separated)
Always set Enabled: true on creation
Document snippet parameters in the Description field
Keep snippets focused and single-purpose
Use includes for pure Liquid logic (no HTML output)

⚠️ Common Gotcha

Newly created snippets are disabled by default. If your snippet renders as empty, check the Enabled flag.

Code Examples

// JavaScript: Snippet Management
class SnippetManager {
  constructor(token, baseUrl) {
    this.token = token;
    this.baseUrl = baseUrl;
  }
  
  async create(name, alias, content, description = '') {
    const response = await fetch(`${this.baseUrl}/api/v2/admin/snippets`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${this.token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        Name: name,
        Alias: alias,
        Content: content,
        Enabled: true,  // CRITICAL: Must be true!
        Description: description
      })
    });
    
    return await response.json();
  }
  
  async update(id, content) {
    // GET first to preserve other fields
    const current = await this.get(id);
    
    const response = await fetch(`${this.baseUrl}/api/v2/admin/snippets/${id}`, {
      method: 'PUT',
      headers: {
        'Authorization': `Bearer ${this.token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        ...current,
        Content: content
      })
    });
    
    return await response.json();
  }
  
  async get(id) {
    const response = await fetch(`${this.baseUrl}/api/v2/admin/snippets/${id}`, {
      headers: { 'Authorization': `Bearer ${this.token}` }
    });
    return await response.json();
  }
  
  async getByAlias(alias) {
    const where = {"$and": [{"$eq": {"Alias": alias}}]};
    const params = new URLSearchParams({
      Where: JSON.stringify(where),
      Limit: '1'
    });
    
    const response = await fetch(
      `${this.baseUrl}/api/v2/admin/snippets?${params}`,
      { headers: { 'Authorization': `Bearer ${this.token}` } }
    );
    
    const data = await response.json();
    return data.Items?.[0] || null;
  }
  
  async list() {
    const where = {"$and": [{"$eq": {"Enabled": true}}]};
    const params = new URLSearchParams({
      Where: JSON.stringify(where),
      Order_By: 'Name'
    });
    
    const response = await fetch(
      `${this.baseUrl}/api/v2/admin/snippets?${params}`,
      { headers: { 'Authorization': `Bearer ${this.token}` } }
    );
    
    return await response.json();
  }
}

// Usage
const snippets = new SnippetManager(token, 'https://your-site.webinone.com');

// Create header snippet
const header = await snippets.create(
  'Header',
  'header',
  '...',
  'Main site header with navigation'
);

// Update snippet content
await snippets.update(header.Id, 'Updated nav');

// Find by alias
const found = await snippets.getByAlias('header');
console.log(found.Content);