Profile Widget

Display a user's profile card with identity and social information.

Profile Widget

Quick Start

import { createWidget } from '@dotpassport/sdk';

const widget = createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'profile'
});

widget.mount('#container');

---

Configuration Options

Option	Type	Default	Description
apiKey	string	required	Your DotPassport API key
address	string	required	Polkadot address to display
type	'profile'	required	Widget type
theme	'light' | 'dark' | 'auto'	'light'	Color theme
showIdentities	boolean	true	Display chain identities
showSocials	boolean	true	Display social links
showBio	boolean	true	Display user bio
className	string	''	Custom CSS class
baseUrl	string	-	Custom API base URL
onLoad	() => void	-	Callback when loaded
onError	(error: Error) => void	-	Error callback

---

Examples

Full Profile

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'profile',
  showBio: true,
  showSocials: true,
  showIdentities: true
}).mount('#container');

Minimal Profile

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'profile',
  showBio: false,
  showSocials: false,
  showIdentities: false
}).mount('#container');

With Social Links

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'profile',
  showSocials: true,
  showIdentities: false
}).mount('#container');

Dark Theme

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'profile',
  theme: 'dark'
}).mount('#container');

---

React Integration

import { useEffect, useRef } from 'react';
import { createWidget } from '@dotpassport/sdk';

interface ProfileWidgetProps {
  address: string;
  theme?: 'light' | 'dark' | 'auto';
  compact?: boolean;
}

function ProfileWidget({ address, theme = 'light', compact = false }: ProfileWidgetProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const widgetRef = useRef<ReturnType<typeof createWidget>>();

  useEffect(() => {
    if (!containerRef.current) return;

    widgetRef.current = createWidget({
      apiKey: process.env.REACT_APP_DOTPASSPORT_API_KEY!,
      address,
      type: 'profile',
      theme,
      compact,
      showAvatar: true,
      showBio: !compact,
      showSocials: !compact
    });

    widgetRef.current.mount(containerRef.current);

    return () => widgetRef.current?.destroy();
  }, [address, theme, compact]);

  return <div ref={containerRef} />;
}

---

Vue Integration

<template>
  <div ref="container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { createWidget } from '@dotpassport/sdk';

const props = defineProps({
  address: { type: String, required: true },
  theme: { type: String, default: 'light' },
  showSocials: { type: Boolean, default: true }
});

const container = ref(null);
let widget = null;

onMounted(() => {
  widget = createWidget({
    apiKey: import.meta.env.VITE_DOTPASSPORT_API_KEY,
    address: props.address,
    type: 'profile',
    theme: props.theme,
    showSocials: props.showSocials
  });
  widget.mount(container.value);
});

onUnmounted(() => widget?.destroy());

watch(() => props.address, (newAddress) => {
  widget?.update({ address: newAddress });
});
</script>

---

Profile Data

The profile widget displays:

User Information

• Display Name: On-chain identity name

• Avatar: Profile picture (if set)

• Bio: User description

Social Links

• Twitter/X

• GitHub

• Discord

• Telegram

• Email

• Website

Chain Identities

• Polkadot identity

• Kusama identity

• Other parachain identities

---

Event Handling

const widget = createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'profile',
  onLoad: () => {
    console.log('Profile loaded');
  },
  onError: (error) => {
    console.error('Failed to load profile:', error);
    // Show fallback UI for users without profiles
  }
});

---

Handling Missing Profiles

const widget = createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'profile',
  onError: (error) => {
    // User may not have a DotPassport profile yet
    document.getElementById('container').innerHTML = `
      <div class="no-profile">
        <p>This address doesn't have a DotPassport profile yet.</p>
        <a href="https://dotpassport.com/create">Create Profile</a>
      </div>
    `;
  }
});

---

Related

• Reputation Widget

• Badge Widget

• Lifecycle Methods

• Profile API Methods