Skip to main content

​
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

PropertyTypeRequiredDescription
datastring✅ YesContains the main input such as a social profile URL, username handle, or contact ID.
fieldstring✅ YesDefines the type of input. Supported values: url, handle, id, tel, email.
keystring✅ YesUnique identifier for the social network (e.g., facebook, instagram, whatsapp).
namestringNoOptional display name for internal reference.
labelstringNoText label shown on the landing page (e.g., “Follow us on Instagram”).
colorobjectNoAllows customization of button, label, and border colors.
iconobjectNoCustom icon reference for the platform. Must include a valid url.
trackingobjectNoReference 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.