### Install and Initialize Insites CLI Project

Source: https://context7.com/context7/insites_io/llms.txt

These bash commands cover the initial setup of an Insites.io project using the Insites CLI. It includes global installation of the CLI, creating a new project directory, initializing the project, and configuring environment connections for different instances.

```bash
# Install Insites CLI globally
npm install -g @insites/cli

# Initialize new project
mkdir my-insites-app
cd my-insites-app
insites init

# Configure instance connection
# Creates .insites-config file with instance URL and API key
insites env add staging https://staging.insites.io YOUR_API_KEY
insites env add production https://production.insites.io YOUR_PROD_KEY
```

--------------------------------

### Complete Kanban Board Example

Source: https://docs.insites.io/web-components/v2-kanban-board

Demonstrates a fully functional Kanban board with multiple columns and cards. Each card includes details like item name, date, time, user, and price. This example utilizes the `<ins-kanban-board>` and `<ins-kanban-column>` components with various attributes for customization.

```html
<ins-kanban-board>
    <ins-kanban-column
      heading="TODO"
	  heading-color="#4ecdc4"
	  heading-text-color="#000"
      total-count="3"
      heading-sub-detail="$308"
      add-item-button
	  add-item-button-label="Add New" >
      <ins-kanban-card id="columnItem">
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-12
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:12 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Courtney Henry
            </span>
          </div>
          <div class="primary-detail">
            $120
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="In Progress"
      heading-color="#76E5FC"
	  heading-text-color="#000"
      total-count="3"
      heading-sub-detail="$123"
      add-item-button >
      <ins-kanban-card>
        column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 3
      </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>
```

--------------------------------

### Insites Module GraphQL Query Example

Source: https://context7.com/context7/insites_io/llms.txt

This is an example of a GraphQL query within an Insites.io module, specifically for fetching product records. It demonstrates filtering records by table and paginating results, returning product IDs and properties.

```graphql
query GetProducts {
  records(
    filter: { table: { value: "products" } }
    per_page: 20
  ) {
    results {
      id
      properties
    }
  }
}
```

--------------------------------

### Retrieve Contact Details with Relationships via Insites API

Source: https://context7.com/context7/insites_io/llms.txt

This example shows how to fetch a specific contact's information, including their associated addresses, relationships, and companies, using a GET request to the Insites.io API. Authentication and content type headers are necessary.

```shell
curl -X GET "https://your-instance.insites.io/api/v2/contacts/contact-123?include=addresses,relationships,companies" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json"
```

--------------------------------

### Insites Alert Box Component Examples (HTML)

Source: https://context7.com/context7/insites_io/llms.txt

Demonstrates the Insites Alert Box component for displaying notifications with various severity levels (primary, success, warning, error). Includes examples of static usage and dynamic creation with JavaScript, featuring auto-removal after a set time.

```html

      <div>
        <strong>${title}</strong><br />
        <span>${message}</span>
      </div>
    ";

    document.getElementById('alertContainer').appendChild(alertBox);

    // Auto-remove after 5 seconds
    setTimeout(() => alertBox.remove(), 5000);
  }

  // Usage examples
  showAlert('success', 'Saved', 'Your profile has been updated');
  showAlert('error', 'Failed', 'Unable to connect to server');
</script>
```

--------------------------------

### Complete Ins-button Example with Attributes

Source: https://docs.insites.io/web-components/v2-buttons

A comprehensive example of the <ins-button> component demonstrating various attributes like label, icon, solid, color, size, and tooltip. The tooltip supports HTML content.

```html
<ins-button 
  label="NORMAL" 
  icon="icon-email-1" 
  icon-right="icon-heart"
  solid 
  color="blue" 
  size="normal"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-button>
```

--------------------------------

### Query Module Records in Insites

Source: https://docs.insites.io/developers-guide/modules-overview

Provides an example of querying records defined within an Insites module using GraphQL. The query specifies the module's record table using a prefixed path.

```GraphQL
query get_resumes {
  records(
    per_page: 5
    filter: {
      table: { value: "modules/admin/resume" }
  }
  ) {
    results {
      id
    }
  }
}
```

--------------------------------

### List Installed Insites Modules

Source: https://docs.insites.io/developers-guide/insites-cli-commands-and-options

Lists all modules installed on a specified environment. Note that modules deployed via the 'modules/' directory are not included in this list. This feature is experimental.

```bash
insites-cli module list <environment-name>
```

--------------------------------

### Pull Installed Insites Modules from Environment

Source: https://docs.insites.io/developers-guide/insites-cli-commands-and-options

Downloads all installed modules from a specified Insites environment to your local project. This is useful for transferring configurations or dependencies.

```bash
insites-cli modules pull <environment-name>
```

--------------------------------

### Insites Autoresponder Email Example

Source: https://docs.insites.io/instance/email-templates

This snippet illustrates an email using the Insites external email layout for an autoresponder. It shows how to include dynamic sender and reply-to information and specifies the email subject and layout. The example also includes a `name` for the autoresponder.

```jinja
{%-
include 'modules/insites_core/email_layout/autoresponder_from'
-%}
reply_to: >
{%- include 'modules/insites_core/email_layout/autoresponder_reply_to' -%}
cc:
bcc:
subject: We have received your enquiry
layout: modules/insites_core/insites_admin/insites_external_email_layout
---
Your email content here..'>
xxxxxxxxxx
3
1
---
2
name: sales_enquiry_autoresponder
3
to:
```

--------------------------------

### Kanban Card Customization Example

Source: https://docs.insites.io/web-components/v2-kanban-board

Demonstrates the flexibility of the `<ins-kanban-card>` component, allowing for fully custom content within each card. While the component provides a default design, users can override it with custom HTML, CSS classes, and structure as shown in the example.

```html
<ins-kanban-card>
  <div class="card-title">Item Name</div>
  <div class="sub-details-wrap">
    <div class="sub-detail">
      <i class="icon-calendar"></i>
      <span>2020-08-09</span>
    </div>
    <div class="sub-detail">
      <i class="icon-clock"></i>
      <span>2:33 PM</span>
    </div>
  </div>
  <div class="details-footer">
    <div class="user-options">
      <i class="icon-user-1"></i>
      <span>Jane Cooper</span>
    </div>
    <div class="primary-detail">$98</div>
  </div>
</ins-kanban-card>

<ins-kanban-card>
  Item Name
  <br>
  Date: 2020-08-09
  <br>
  Time: 2:33 PM
  <br>
  Description: The quick brown fox jumps over the lazy dog
  <br>
  Price: $98
</ins-kanban-card>

<ins-kanban-card>
  Item Name
  <br>
  __ Date
  <br>
  __ Time
  <br>
  __ The quick brown fox jumps over the lazy dog
  <br>
  Price
</ins-kanban-card>

<ins-kanban-card>
  Sunt Lorem et ullamco laborum anim nisi dolor labore sint nulla Lorem.
  <br>
  Nulla mollit pariatur laboris eu veniam occaecat eiusmod tempor ex anim in. Eiusmod sint aute voluptate non ipsum adipisicing commodo laborum dolore aliquip occaecat. Labore deserunt do nulla non sint reprehenderit. Amet nulla sit cupidatat reprehenderit dolor ea minim. Excepteur adipisicing ullamco ea aliquip ut irure.
</ins-kanban-card>
```

--------------------------------

### Install Insites Components with Latest Version CDN

Source: https://docs.insites.io/web-components

This snippet shows how to install the latest version of Insites Components by adding CSS and JavaScript files to your project's head tag. It includes dependencies for fonts, font icons, and the main component library, ensuring your project stays up-to-date with the latest release.

```html
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
<script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>
```

--------------------------------

### Install Insites Web Components Library

Source: https://context7.com/context7/insites_io/llms.txt

Instructions for adding the Insites web components library to your project's HTML <head> tag. It provides CSS and JavaScript for UI elements across platforms. You can use the latest version or a specific version to avoid breaking changes.

```html
<!-- Add to your <head> tag for latest version -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
<script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>

<!-- Or use specific version to avoid breaking changes -->
<link rel="stylesheet" href="https://components.insites.io/v2.15.2/css/insites.css" />
<script type="module" src="https://components.insites.io/v2.15.2/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2.15.2/insites.js"></script>
```

--------------------------------

### Install Insites Components with Specific Version CDN

Source: https://docs.insites.io/web-components

This snippet demonstrates how to install a specific version of Insites Components by referencing a particular version number in the CDN links for CSS and JavaScript files. This is useful for avoiding breaking changes or unexpected updates when new versions are released.

```html
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2.15.2/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2.15.2/css/insites.css" />
<script type="module" src="https://components.insites.io/v2.15.2/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2.15.2/insites.js"></script>
```

--------------------------------

### GraphQL Queries for Insites Database (GraphQL)

Source: https://context7.com/context7/insites_io/llms.txt

Provides GraphQL query examples for interacting with the Insites database. Demonstrates fetching user profiles with filtering by active status and creation date, and querying custom table records with property-based filtering and sorting.

```graphql
# Fetch user profiles with filtering
query GetUserProfiles {
  users(
    filter: {
      is_active: { value: true }
      created_at: { gte: "2025-01-01" }
    }
    per_page: 10
    page: 1
  ) {
    total_entries
    results {
      id
      email
      first_name
      last_name
      created_at
      profile {
        company
        phone
        address {
          street
          city
          state
          zip
        }
      }
    }
  }
}

# Query database records (custom tables)
query GetProducts {
  records(
    per_page: 20
    filter: {
      table: { value: "products" }
      properties: [
        { name: "status", value: "active" }
        { name: "price", range: { gte: 10, lte: 100 } }
      ]
    }
    sort: [
      { created_at: { order: DESC } }
    ]
  ) {
    total_entries
    results {
      id
      table
      created_at
      properties
      user {
        email
        first_name
      }
    }
  }
}
```

--------------------------------

### Ins-button Size Attribute Example

Source: https://docs.insites.io/web-components/v2-buttons

Shows how to control the size of the <ins-button> using the 'size' attribute. This example sets the size to 'large'.

```html
<ins-button 
  size="large">
</ins-button>
```

--------------------------------

### Liquid Templating Language Examples (Liquid)

Source: https://context7.com/context7/insites_io/llms.txt

Illustrates Liquid's capabilities for dynamic content rendering, including variable output, string manipulation filters (upcase, replace), chaining filters, array handling, conditional logic (if/else), loops (for), comments, and the 'liquid' tag for cleaner syntax.

```liquid
<!-- Basic output -->
{{ user.name }}
<!-- Output: John -->

{{ user.email }}
<!-- Output: john@example.com -->

<!-- Filters for string manipulation -->
{{ "honda crx" | upcase }}
<!-- Output: HONDA CRX -->

{{ "Hello liquid" | replace: "liquid", "world!" }}
<!-- Output: Hello world! -->

<!-- Chaining multiple filters -->
{{ "One,Two,Three,Four" | prepend: "Zero," | append: ",Five" | split: "," }}
<!-- Output: ZeroOneTwoThreeFourFive -->

<!-- Working with arrays -->
{% assign numbers = "One,Two,Three,Four" %}
{% assign numbersWithZero = numbers | prepend: "Zero," %}
{% assign all_numbers = numbersWithZero | append: ",Five" %}
{% assign all_numbers_array = all_numbers | split: "," %}
{{ all_numbers_array }}

<!-- Conditional logic -->
{% if user %}
  <p>Welcome back, {{ user.name }}!</p>
  {% if user.is_admin %}
    <a href="/admin">Admin Dashboard</a>
  {% endif %}
{% else %}
  <p>Please log in to continue.</p>
{% endif %}

<!-- Looping through data -->
{% for product in products %}
  <div class="product">
    <h3>{{ product.name }}</h3>
    <p>Price: ${{ product.price | number_with_precision: 2 }}</p>
    {% if product.on_sale %}
      <span class="badge">Sale!</span>
    {% endif %}
  </div>
{% endfor %}

<!-- Comments -->
{% comment %}
  This is a comment that won't appear in the output
  Useful for documentation and debugging
{% endcomment %}

<!-- Using liquid tag syntax for cleaner code -->
{% liquid
  comment
    Calculate discount and final price
  endcomment

  assign original_price = 99.99
  assign discount_percent = 20
  assign discount_amount = original_price | times: discount_percent | divided_by: 100
  assign final_price = original_price | minus: discount_amount

  echo "Original: $"
  echo original_price
  echo " - Save $"
  echo discount_amount
  echo " = $"
  echo final_price
%}
```

--------------------------------

### GraphQL Query for Blog Instance

Source: https://docs.insites.io/developers-guide/modules-overview

This is a GraphQL query designed to fetch blog instance data. It accepts parameters like user ID, slug, and scope. The query structure itself is standard GraphQL, but its integration might involve specific prefixes.

```graphql
query get_blog_instance(
  $current_user_id: ID
  $slug: String
  $scope: String
) {
  records(
  ... 
) {
}
```

--------------------------------

### Ins-button Color Attribute Example

Source: https://docs.insites.io/web-components/v2-buttons

Illustrates how to apply different color schemes to the <ins-button> using the 'color' attribute. This example uses the 'positive' color.

```html
<ins-button 
  color="positive">
</ins-button>
```

--------------------------------

### Include Module Partial in Insites

Source: https://docs.insites.io/developers-guide/modules-overview

Demonstrates how to include a partial from a module in Insites. This method uses a shortened name for the partial, abstracting away the module's internal file path.

```Liquid
{% include "modules/admin/comments" %}
```

--------------------------------

### GraphQL Mutations for Data Management

Source: https://context7.com/context7/insites_io/llms.txt

Provides examples of GraphQL mutations for common data manipulation tasks including creating and updating users, creating, updating, and deleting database records (like products), and creating orders with associated items.

```graphql
# Create a new user profile
mutation CreateUser {
  user_create(
    email: "newuser@example.com"
    password: "securePassword123!"
    first_name: "Jane"
    last_name: "Doe"
    properties: {
      phone: "555-1234"
      company: "Acme Corp"
    }
  ) {
    id
    email
    first_name
    last_name
    created_at
  }
}

# Update existing user
mutation UpdateUser($userId: ID!) {
  user_update(
    id: $userId
    first_name: "John"
    properties: {
      phone: "555-5678"
      company: "New Company Inc"
    }
  ) {
    id
    email
    first_name
    updated_at
  }
}

# Create database record
mutation CreateProduct {
  record_create(
    table: "products"
    properties: {
      name: "Premium Widget"
      description: "High-quality widget for professionals"
      price: 49.99
      sku: "WIDGET-001"
      status: "active"
      inventory_count: 100
      is_featured: true
    }
  ) {
    id
    table
    properties
    created_at
  }
}

# Update database record
mutation UpdateProduct($recordId: ID!) {
  record_update(
    id: $recordId
    properties: {
      price: 39.99
      inventory_count: 75
      status: "sale"
    }
  ) {
    id
    properties
    updated_at
  }
}

# Delete record
mutation DeleteProduct($recordId: ID!) {
  record_delete(id: $recordId) {
    id
  }
}

# Create order with items
mutation CreateOrder {
  record_create(
    table: "orders"
    properties: {
      customer_email: "customer@example.com"
      status: "pending"
      total_amount: 149.97
      currency: "USD"
      billing_address: {
        street: "123 Main St"
        city: "San Francisco"
        state: "CA"
        zip: "94105"
      }
      items: [
        {
          product_id: "prod-123"
          quantity: 2
          unit_price: 49.99
        },
        {
          product_id: "prod-456"
          quantity: 1
          unit_price: 49.99
        }
      ]
    }
  ) {
    id
    properties
    created_at
  }
}
```

--------------------------------

### Ins-button for Static Data Source

Source: https://docs.insites.io/web-components/v2-buttons

An example of an <ins-button> configured for a static data source, using attributes for label, solid state, color, and size.

```html
<ins-button 
  label="Open" 
  solid 
  color="positive" 
  size="normal">
</ins-button>
```

--------------------------------

### Insites Kanban Board Component Example

Source: https://docs.insites.io/web-components/v2-kanban-board

This snippet demonstrates the Insites Kanban Board component, featuring multiple columns with customizable headings, colors, and item counts. Each column contains kanban cards with diverse content, including titles, sub-details, user information, and rich text elements.

```html
<ins-kanban-board>
    <ins-kanban-column
      heading="With the default design style containers and classes"
	  heading-color="#FFD6E0"
      total-count="2"
      add-item-button
	  add-item-button-label="Add Task">
      <ins-kanban-card>
        <div class="card-title">
          We design and make concrete products.
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-09
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:33 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Jane Cooper
            </span>
          </div>
          <div class="primary-detail">
            $98
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              Date
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              Time
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              The quick brown fox jumps over the lazy dog
            </span>
          </div>
          <div class="primary-detail">
            Price
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              Date
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              Time
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              The quick brown fox jumps over the lazy dog
            </span>
          </div>
          <div class="primary-detail">
            Price
          </div>
        </div>
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="With custom components, elements"
	  heading-color="#7BF1A8"
      total-count="3"
      add-item-button >
      <ins-kanban-card>
        <strong>Sunt Lorem et ullamco laborum anim nisi dolor labore sint nulla Lorem.</strong>
        <i>Nulla mollit pariatur laboris eu veniam occaecat eiusmod tempor ex anim in. Eiusmod sint aute voluptate non ipsum adipisicing commodo laborum dolore aliquip occaecat.
            Labore deserunt do nulla non sint reprehenderit. Amet nulla sit cupidatat reprehenderit dolor ea minim. Excepteur adipisicing ullamco ea aliquip ut irure.
        </i>
      </ins-kanban-card>
      <ins-kanban-card>
        <h3>Incididunt consectetur minim mollit aute do elit proident deserunt ipsum.</h3>
      </ins-kanban-card>
      <ins-kanban-card>
        <i class="icon-heart"></i>
        <h3>
        Lorem ipsum
        </h3>
        <doc-quote type="reference">
        <div>
            <span class="icon-feather"></span>
            <span class="box-title">Pariatur velit officia aliqua aute deserunt proident deserunt.</span>
        </div>
        <p>Sample link <a href="https://docs.insites.io/" target="_blank">Insites Docs</a>.</p>
         </doc-quote>
     </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>
```

--------------------------------

### Ins-button Sizes - Small

Source: https://docs.insites.io/web-components/v2-buttons

An example of a small-sized <ins-button> using the 'size="small"' attribute, along with label, solid, and color attributes.

```html
<ins-button 
  label="SMALL" 
  solid 
  color="blue" 
  size="small">
</ins-button>
```

--------------------------------

### Reference GraphQL Query in Template

Source: https://docs.insites.io/developers-guide/modules-overview

This Liquid template code shows how to reference a GraphQL query. The `graphql` tag is used, with the first argument being the module path to the GraphQL query file. The result is assigned to a variable 'bi'.

```liquid
{%- graphql bi = "modules/admin/get_blog_instance" -%}
```

--------------------------------

### Ins-button Colours - Secondary (Text, Normal, Outlined)

Source: https://docs.insites.io/web-components/v2-buttons

Provides examples of 'TEXT', 'NORMAL', and 'OUTLINED' variants of <ins-button> using the 'secondary' color scheme.

```html
<ins-button 
  label="TEXT" 
  color="secondary" 
  size="normal">
</ins-button>

<ins-button 
  label="NORMAL" 
  solid 
  color="secondary" 
  size="normal">
</ins-button>

<ins-button 
  label="OUTLINED" 
  color="secondary" 
  outlined 
  size="normal">
</ins-button>
```

--------------------------------

### Insites Workflow Email Example

Source: https://docs.insites.io/instance/email-templates

This snippet demonstrates the structure of an email using the Insites internal email layout for a workflow. It includes placeholders for dynamic content and email headers. The `reply_to`, `subject`, `layout`, and `to` fields are configured, along with a `name`, `delay`, `enabled`, and `trigger_condition` for the workflow.

```jinja
{%-
include 'modules/insites_core/email_layout/workflow_from'
-%}
reply_to: >
{%- include 'modules/insites_core/email_layout/workflow_reply_to' -%}
cc:
bcc:
subject: Sales Enquiry - Workflow
layout: modules/insites_core/insites_admin/insites_internal_email_layout
---
Your email content here..
>
xxxxxxxxxx
7
1
---
2
name: sales_enquiry_workflow
3
delay: 0
4
enabled: true
5
trigger_condition: true
6
to: >
7
    {%- include
```

--------------------------------

### Upgrade Insites CLI Tool Version

Source: https://docs.insites.io/developers-guide/insites-cli-commands-and-options

Upgrades the installed version of the Insites CLI tool to the latest release. Administrator privileges (CMD as administrator or sudo on Unix-based systems) may be required.

```bash
npm update -g @insites/insites-cli
```

--------------------------------

### Ins-button Types - Text, Normal, Outlined

Source: https://docs.insites.io/web-components/v2-buttons

Provides examples of the 'TEXT', 'NORMAL', and 'OUTLINED' types of <ins-button>, showcasing different styling options for text-based buttons.

```html
<ins-button label="TEXT" color="primary" size="normal"></ins-button>
<ins-button label="NORMAL" solid color="primary" size="normal"></ins-button>
<ins-button label="OUTLINED" color="primary" outlined size="normal"></ins-button>
```

--------------------------------

### API V2 REST Endpoints for Event Tickets and Orders

Source: https://context7.com/context7/insites_io/llms.txt

This section details how to interact with the API V2 REST endpoints. It includes examples for retrieving event tickets with filtering and pagination, and for creating new orders with item and discount information. Requires authorization with a Bearer token.

```bash
# Get event tickets with filtering and pagination
curl -X GET "https://your-instance.insites.io/api/v2/events/event-tickets?event_uuid=evt-123&status=confirmed&page=1&per_page=20" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json"

# Response
{
  "data": [
    {
      "id": "ticket-001",
      "event_uuid": "evt-123",
      "reference_code": "TKT-12345",
      "confirmation_status": "confirmed",
      "price": 99.99,
      "price_includes_tax": true,
      "tax_type": "percentage",
      "event_pricing_tier_uuid": "tier-001",
      "purchased_by_contact_uuid": "contact-001",
      "contact_email": "attendee@example.com",
      "created_at": "2025-10-10T10:00:00Z"
    }
  ],
  "meta": {
    "total": 150,
    "page": 1,
    "per_page": 20,
    "total_pages": 8
  }
}

# Create new order with items
curl -X POST "https://your-instance.insites.io/api/v2/orders" \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "customer_email": "customer@example.com",
    "billing_contact": {
      "first_name": "John",
      "last_name": "Doe",
      "email": "john@example.com",
      "phone": "555-1234"
    },
    "billing_address": {
      "street": "123 Main St",
      "city": "San Francisco",
      "state": "CA",
      "zip": "94105",
      "country": "US"
    },
    "items": [
      {
        "product_uuid": "prod-123",
        "quantity": 2,
        "unit_price": 49.99,
        "unit_price_includes_tax": true,
        "is_use_sale_price": false
      }
    ],
    "discounts": [
      {
        "code": "SAVE20",
        "type": "percentage",
        "value": 20
      }
    ]'

```

--------------------------------

### Link Module CSS Asset in Insites

Source: https://docs.insites.io/developers-guide/modules-overview

Illustrates how to link a CSS file from a module's public assets directory in Insites. It utilizes the `asset_url` filter with the module-prefixed path.

```HTML
<link rel="stylesheet" media="screen" href="{{ 'modules/admin/app.css' | asset_url }}">
```

--------------------------------

### Insites Card Select: Basic Example

Source: https://docs.insites.io/web-components/v2-card-select

Demonstrates the basic usage of the ins-card-select component with multiple options. This component functions like a radio button group, allowing only single selection. It supports a label and a tooltip for user guidance.

```html
<ins-card-select label="Card Select" tooltip="This is a sample tooltip content. It also support html content.">
  <div>
    <ins-card-select-option value="value_1">
      <div>
        <strong>Option 1</strong><br/>
        <p>Value 1</p>
      </div>
    </ins-card-select-option>
    <ins-card-select-option value="value_2">
      <div>
        <strong>Option 2</strong><br/>
        <p>Value 2</p>
      </div>
    </ins-card-select-option>
    <ins-card-select-option value="value_3">
      <div>
        <strong>Option 3</strong><br/>
        <p>Value 3</p>
      </div>
    </ins-card-select-option>
  </div>
</ins-card-select>
```

--------------------------------

### Button Colors - Information 2

Source: https://docs.insites.io/web-components/v2-buttons

Illustrates the 'ins-button' component using the 'information-2' color attribute. Examples include text, normal solid, and outlined styles, all with a 'normal' size.

```html
<ins-button 
  label="TEXT" 
  color="information-2" 
  size="normal">
</ins-button>

<ins-button 
  label="NORMAL" 
  solid 
  color="information-2" 
  size="normal">
</ins-button>

<ins-button 
  label="OUTLINED" 
  color="information-2" 
  outlined 
  size="normal">
</ins-button>
```

--------------------------------

### Reference Module Layout in Insites

Source: https://docs.insites.io/developers-guide/modules-overview

Shows how to reference a layout file from an Insites module. The layout name is prefixed with the module's path, allowing Insites to locate the correct layout file within the module's structure.

```YAML
slug: admin/settings
layout: modules/admin/settings
```

--------------------------------

### Define Authorization Policy for Viewing Blog Posts

Source: https://docs.insites.io/developers-guide/modules-overview

This YAML defines an authorization policy named 'can_view_blog_posts'. It specifies a redirect path and a flash alert message for users who are not authorized. The policy itself evaluates to 'true', implying it's a condition that must be met.

```yaml
name: can_view_blog_posts
redirect_to: /blog
flash_alert: Please log in to access this page.
---
true
```

--------------------------------

### Kanban Board JavaScript Event Listeners and Methods

Source: https://docs.insites.io/web-components/v2-kanban-board

This JavaScript snippet demonstrates how to use event listeners and methods with the `<ins-kanban-board>` component. It shows how to listen for various column events like `insColumnAdd`, `insDragStart`, `insDragEnd`, `insAdd`, `insSort`, `insChoose`, `insUpdate`, `insMove`, `insRemove`, and `insPositionChanged`, as well as card click events (`insClick`). It also includes examples of using the `getColumnCardsOrder()` and `reorderCards()` methods.

```javascript
var myColumn = document.getElementById('myColumn');
  
    // Event for when the Add Item button is clicked
    myColumn.addEventListener('insColumnAdd', event => {
      console.log(event.detail);
      
      // Method that returns the order of the cards in the column (this is based from the card-sortable-id attribute of the ins-kanban-card)
      console.log(myColumn.getColumnCardsOrder())
      
      var order = ["3","2","1"];
      // Method that reorders the cards in the column based on the passed order array
      myColumn.reorderCards(order);
    });
	
    // Event for when the a drag has started
    myColumn.addEventListener('insDragStart', event => {
      console.log("insDragStart: ", event.detail);
    });
    
    // Event for when the a drag has ended
    myColumn.addEventListener('insDragEnd', event => {
      console.log("insDragEnd: ", event.detail);
    });
    
    // Event for when a card is dropped into the column from another column
    myColumn.addEventListener('insAdd', event => {
      console.log("insAdd: ", event.detail);
    });
    
    // Event for when any change is done to the column (add/update/remove)
    myColumn.addEventListener('insSort', event => {
      console.log("insSort: ", event.detail);
    });
    
    // Event for when when a card is chosen
    myColumn.addEventListener('insChoose', event => {
      console.log("insChoose: ", event.detail);
    });
    
    // Event for when the sorting is changed within the column
    myColumn.addEventListener('insUpdate', event => {
      console.log("insUpdate: ", event.detail);
    });
    
    // Event for when a card is moved in the column or between columns
    myColumn.addEventListener('insMove', event => {
      console.log("insMove: ", event.detail);
    });
    
    // Event for when a card is removed from the column into another column
    myColumn.addEventListener('insRemove', event => {
      console.log("insRemove: ", event.detail);
    });
    
    // Event for when the dragged card changes position
    myColumn.addEventListener('insPositionChanged', event => {
      console.log("insPositionChanged: ", event.detail);
    });

    var myCard = document.getElementById('myCard');
    // Event for when a card is clicked
    myCard.addEventListener('insClick', event => {
      console.log(event.detail)
    });
```

--------------------------------

### Creating a Page via Instance Admin

Source: https://context7.com/context7/insites_io/llms.txt

Details on configuring pages using the CMS interface, including content, SEO, security, and caching settings.

```APIDOC
## Creating a Page via Instance Admin

### Description
Configure pages with content, SEO, security, and caching through the CMS interface.

### Method
N/A (Configuration via UI)

### Endpoint
N/A (Configuration via UI)

### Parameters
This section describes the structure of the page configuration, typically managed through a UI or a configuration file.

#### Page Configuration Structure (YAML)

**Details**:
- **page_name** (String) - The internal name of the page.
- **page_slug** (String) - The URL slug for the page.
- **file_path** (String) - The path to the page template file.
- **layout** (String) - The layout to be used for the page.
- **max_deep_level** (Integer) - Maximum deep level for the page.
- **redirect_to** (String) - URL to redirect to, if any.
- **redirect_code** (Integer) - HTTP redirect code (e.g., 301, 302).

**Content**:
- **page_title** (String) - The title of the page as displayed in the browser tab.
- **content** (Liquid Template) - The main content of the page, using Liquid templating language.

**Sitemap**:
- **add_to_system_sitemap** (Boolean) - Whether to include the page in the system sitemap.
- **priority** (Float) - Priority of the page in the sitemap (0.0 to 1.0).
- **order** (Integer) - Order of the page in the sitemap.
- **change_frequency** (String) - How frequently the page content is likely to change (e.g., 'daily', 'weekly').

**Metadata**:
- **make_visible_to_search_engines** (Boolean) - Whether the page should be indexed by search engines.
- **canonical_url** (String) - The canonical URL for the page.
- **meta_title** (String) - The meta title tag for SEO.
- **meta_description** (String) - The meta description tag for SEO.

**OpenGraph**:
- **use_meta_title** (Boolean) - Use meta title for OpenGraph title.
- **og_title** (String) - OpenGraph title.
- **use_meta_description** (Boolean) - Use meta description for OpenGraph description.
- **og_description** (String) - OpenGraph description.
- **og_image** (String) - URL of the OpenGraph image.
- **og_url** (String) - URL for OpenGraph.
- **og_site_name** (String) - The name of the site for OpenGraph.
- **og_type** (String) - The type of OpenGraph resource (e.g., 'website', 'article').

**Schema**:
- **schema_content** (JSON-LD) - Schema.org markup for the page.

**Security**:
- **apply_auth_policy** (Boolean) - Whether to apply authentication policies.
- **auth_policies** (Array) - List of authentication policies to apply.

**Cache**:
- **enable_dynamic_cache** (Boolean) - Whether to enable dynamic caching.
- **cache_expiry** (Integer) - Cache expiry time in seconds.
- **cache_key** (String) - The cache key pattern.

### Request Example (YAML Configuration)
```yaml
Details:
  page_name: "Product Catalog"
  page_slug: "products"
  file_path: "/pages/catalog"
  layout: "default"

Content:
  page_title: "Our Products"
  content: |
    {% liquid
      assign products_query = 'GetProducts' | graphql: per_page: 20
      assign products = products_query.results
    %}
    <div class="product-grid">
      {% for product in products %}
        <div class="product-card">
          <h3>{{ product.properties.name }}</h3>
          <p>{{ product.properties.description }}</p>
        </div>
      {% endfor %}
    </div>

Metadata:
  make_visible_to_search_engines: true
  meta_title: "Premium Products | Your Store Name"
  meta_description: "Browse our collection of premium products."
```
```

--------------------------------

### Display Various Insites Alert Box Types - HTML

Source: https://docs.insites.io/web-components/v2-alert-box

This example showcases how to implement different types of Insites alert boxes: primary, success, warning, and error. Each alert box is created using the 'ins-alert-box' element with the 'type' attribute set accordingly, along with a 'close-icon' for interactive alerts.

```html
<ins-alert-box type="primary" close-icon="icon-close-1">
  <div>
    <strong>Primary</strong><br />
    <span>This is an alert box primary type.</span>
  </div>
</ins-alert-box>
<br />

<ins-alert-box type="success" close-icon="icon-close-1">
  <div>
    <strong>Success</strong><br />
    <span>This is an alert box success type.</span>
  </div>
</ins-alert-box>
<br />

<ins-alert-box type="warning" close-icon="icon-close-1">
  <div>
    <strong>Warning</strong><br />
    <span>This is an alert box warning type.</span>
  </div>
</ins-alert-box>
<br />

<ins-alert-box type="error" close-icon="icon-close-1">
  <div>
    <strong>Error</strong><br />
    <span>This is an alert box error type.</span>
  </div>
</ins-alert-box>
```

--------------------------------

### Serve Insites GUI for GraphQL and Liquid

Source: https://docs.insites.io/developers-guide/insites-cli-commands-and-options

Launches an integrated development environment for drafting and executing GraphQL queries and Liquid snippets. It connects directly to your environment, providing a live data preview and reducing potential errors.

```bash
insites-cli gui serve <environment-name>
```

--------------------------------

### Deploy and Sync Insites Project using Insites CLI

Source: https://context7.com/context7/insites_io/llms.txt

This section provides bash commands for deploying and synchronizing an Insites.io project. It covers deploying the entire project, specific modules, or only assets, as well as enabling watch mode for automatic syncing during development.

```bash
# Deploy to staging
insites deploy staging

# Watch for changes and auto-sync
insites sync staging --watch

# Deploy specific module
insites deploy staging --module my_module

# Deploy only assets
insites deploy staging --assets-only
```

--------------------------------

### Update SPF Record for Email Deliverability (Text)

Source: https://docs.insites.io/articles/articles-sendgrid-using-api-call-notifications

This example illustrates how to update a domain's SPF record to include SendGrid's servers. This is a crucial step to prevent emails from being marked as spam and ensure better deliverability. The snippet shows the modification needed for a typical TXT or SPF record.

```text
v=spf1 include:sendgrid.net ~all
```

--------------------------------

### Ins-button Label Attribute Example

Source: https://docs.insites.io/web-components/v2-buttons

Demonstrates changing the text displayed on the button using the 'label' attribute. This example sets a custom label.

```html
<ins-button 
  label="Label Change">
</ins-button>
```

--------------------------------

### Manage Insites Project Configuration and Status via CLI

Source: https://context7.com/context7/insites_io/llms.txt

This set of bash commands illustrates how to manage an Insites.io project's configuration and deployment status using the Insites CLI. It includes linting code, pulling instance configurations, checking deployment status, and viewing logs.

```bash
# Lint your code before deployment
insites lint

# Pull current instance configuration
insites pull staging

# Check deployment status
insites status staging

# View logs
insites logs staging --follow
```

--------------------------------

### Initialize New Insites Module

Source: https://docs.insites.io/developers-guide/insites-cli-commands-and-options

Creates a new module for your Insites project based on the module starter repository. Specify the desired name for your new module.

```bash
insites-cli modules init <module-name>
```