Social Profile Component

Overview

The Social Profile Component allows users to attach multiple social links, handles, or communication channels (e.g., email, phone, or social media profiles) to a landing page.
It supports flexible configuration — including label text, icon customization, and event tracking — enabling personalized, branded connection options. Each profile entry defines what type of field (URL, handle, ID, etc.) it is, what network or platform it belongs to, and how it appears on the page.

Properties

Property	Type	Required	Description
data	`string`	✅ Yes	Contains the main input such as a social profile URL, username handle, or contact ID.
field	`string`	✅ Yes	Defines the type of input. Supported values: `url`, `handle`, `id`, `tel`, `email`.
key	`string`	✅ Yes	Unique identifier for the social network (e.g., `facebook`, `instagram`, `whatsapp`).
name	`string`	No	Optional display name for internal reference.
label	`string`	No	Text label shown on the landing page (e.g., “Follow us on Instagram”).
color	`object`	No	Allows customization of button, label, and border colors.
icon	`object`	No	Custom icon reference for the platform. Must include a valid `url`.
tracking	`object`	No	Reference to the `Event Tracking` component for analytics on profile clicks.

Used in Categories

This component is used in the following categories:

Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Social Profile component",
  "description": "Validate social profile component schema",
  "required": [],
  "additionalProperties": false,
  "type": "array",
  "items": {
    "type": "object",
    "required": [
      "data",
      "field",
      "key"
    ],
    "additionalProperties": false,
    "properties": {
      "data": {
        "type": "string",
        "description": "Data contains either profile url, handle id, etc.",
        "minLength": 2
      },
      "field": {
        "type": "string",
        "enum": [
          "url",
          "handle",
          "id",
          "tel",
          "email"
        ],
        "description": "Type of field value."
      },
      "key": {
        "type": "string",
        "description": "Social media name used to distinguish each social network",
        "minLength": 2
      },
      "name": {
        "type": "string"
      },
      "label": {
        "type": "string",
        "description": "Label to display on the landing page",
        "minLength": 2
      },
      "color": {
        "type": "object",
        "additionalProperties": false,
        "required": [],
        "properties": {
          "button": {
            "type": "string"
          },
          "label": {
            "type": "string"
          },
          "border": {
            "type": "string"
          }
        }
      },
      "icon": {
        "type": "object",
        "additionalProperties": false,
        "required": [
          "url"
        ],
        "properties": {
          "url": {
            "type": "string",
            "minLength": 2
          }
        }
      },
      "tracking": {
        "$ref": "event_tracking.json"
      }
    }
  }
}

Notes

The key field distinguishes between different social platforms and helps render platform-specific icons.
The tracking property integrates with event analytics for measuring user engagement.
Supports both social networks (e.g., Instagram, Facebook) and direct contact methods (phone, email).
Can be displayed as icon-only, text-only, or combined button styles depending on category design.

Getting Started

Code Examples

Category Components

Categories

Overview

Properties

Used in Categories

Schema

Notes

​Overview

​Properties

​Used in Categories

​Schema

​Notes

Overview

Properties

Used in Categories

Schema

Notes