단축URL 플러그인 가이드

<script src="https://fplink.net/sdk/v1/fplink-shorturl-plugin.js"
        data-client-id="YOUR_CLIENT_ID"></script>

<!-- brand.fplink.net 에서 스크립트를 로드하면 단축 URL도 brand.fplink.net 도메인 사용 -->
<script src="https://brand.fplink.net/sdk/v1/fplink-shorturl-plugin.js"
        data-client-id="YOUR_CLIENT_ID"></script>

<!-- fplink.net 기본 도메인에서 스크립트를 로드하되 단축 URL은 brand.fplink.net 사용 -->
<script src="https://fplink.net/sdk/v1/fplink-shorturl-plugin.js"
        data-client-id="YOUR_CLIENT_ID"
        data-short-domain="brand.fplink.net"></script>

<!-- 기본 -->
<div data-fplink="inline"></div>

<!-- 커스터마이징: 플레이스홀더와 버튼 라벨 변경 -->
<div data-fplink="inline"
     data-placeholder="상품 URL을 입력하세요"
     data-label="🔗 단축하기"></div>

<input id="originUrl" type="url" placeholder="원본 URL">
<button data-fplink="shorten"
        data-input="#originUrl"
        data-output="#resultUrl">단축</button>
<input id="resultUrl" type="text" readonly>

<!-- data-url 지정: 해당 URL을 단축 후 복사 -->
<button data-fplink="copy"
        data-url="https://example.com/product/123">링크 복사</button>

<!-- data-url 생략: 현재 페이지 URL을 단축 후 복사 -->
<button data-fplink="copy">이 페이지 공유하기</button>

<button data-fplink="dropdown"
        data-url="https://example.com/product/123">단축 URL</button>

<form data-fplink="form"
      data-fplink-field="#longUrl"
      action="/save"
      method="post">
    <input id="longUrl" type="url" name="url" placeholder="https://example.com">
    <button type="submit">저장</button>
</form>

<div data-fplink-scope="auto">
    <a href="https://www.fingerpush.com">이 링크는 클릭 시 자동 단축됩니다</a>
    <a href="https://www.fingerpush.link">이 링크도 마찬가지입니다</a>
</div>

<!-- script 태그에 data-fplink-float 추가로 원형 버튼 자동 활성화 -->
<script src="https://fplink.net/sdk/v1/fplink-shorturl-plugin.js"
        data-client-id="YOUR_CLIENT_ID"
        data-fplink-float></script>

<div data-fplink="splitbutton"></div>

<div data-fplink="stats"></div>

// 단축 성공 이벤트
document.addEventListener('fplink:shortened', (e) => {
    const { shortUrl, originalUrl, type } = e.detail;
    // type: 'shorten' | 'campaign' | 'copy' | 'form' | 'scope'
    console.log('[FPLink] 단축됨:', shortUrl, '← 원본:', originalUrl, '/ 타입:', type);

    // 예: Google Analytics에 이벤트 전송
    // gtag('event', 'url_shortened', { short_url: shortUrl, type });
});

// 오류 이벤트
document.addEventListener('fplink:error', (e) => {
    console.error('[FPLink] 오류:', e.detail.message);
});

<!-- </body> 앞에 스크립트 삽입 -->
<script src="https://fplink.net/sdk/v1/fplink-shorturl-plugin.js"
        data-client-id="YOUR_CLIENT_ID"></script>

<!-- div 한 줄이면 끝 -->
<div data-fplink="inline"
     data-placeholder="단축할 URL을 입력하세요"
     data-label="단축하기"
     data-color="#2563eb"></div>

<input id="urlInput" type="url" placeholder="https://example.com/very-long-url">

<button data-fplink="shorten"
        data-input="#urlInput"
        data-output="#resultBox">
    🔗 단축 URL 생성
</button>

<input id="resultBox" type="text" readonly placeholder="단축 URL이 여기에 표시됩니다">

<input id="campUrl"  type="url"  placeholder="https://example.com/event">
<input id="campName" type="text" placeholder="캠페인명">
<input id="campSrc"  type="text" placeholder="UTM Source">
<input id="campMed"  type="text" placeholder="UTM Medium">
<button onclick="doCreateCampaign()">📊 캠페인 생성</button>
<input id="campResult" type="text" readonly>

async function doCreateCampaign() {
    const shortUrl = await FPLink.shortenCampaign(
        document.getElementById('campUrl').value,
        {
            campaignName: document.getElementById('campName').value,
            utmSource:    document.getElementById('campSrc').value,
            utmMedium:    document.getElementById('campMed').value,
        }
    );
    document.getElementById('campResult').value = shortUrl;
}

<input id="ddUrlInput" type="url" placeholder="https://example.com">

<div style="position:relative;display:inline-flex;">
    <!-- 좌측: 현재 선택된 동작 실행 -->
    <button id="ddMainBtn" onclick="doDdAction()"
            style="border-radius:8px 0 0 8px;border-right:1px solid rgba(255,255,255,.3);">
        🔗 URL 생성
    </button>
    <!-- 우측: 드롭다운 열기 -->
    <button onclick="toggleDdMenu(event)" style="border-radius:0 8px 8px 0;">▾</button>

    <div id="ddMenu" style="display:none;position:absolute;top:calc(100% + 4px);right:0;
         background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;
         box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:180px;z-index:200;overflow:hidden;">
        <button onclick="selectDdAction('url')">🔗 URL 생성</button>
        <button onclick="selectDdAction('campaign')">📊 캠페인 생성</button>
        <button onclick="selectDdAction('info')">ℹ️ 핑거푸시링크 정보</button>
    </div>
</div>

<!-- 캠페인 생성 선택 시 추가 입력 -->
<div id="ddCampFields" style="display:none;margin-top:10px;">
    <input id="ddCampName" type="text" placeholder="캠페인명 (선택사항)">
</div>
<div id="ddResult"></div>

let _ddCurrentAction = 'url'; // 현재 선택된 동작

function toggleDdMenu(e) {
    e.stopPropagation();
    const m = document.getElementById('ddMenu');
    m.style.display = m.style.display === 'none' ? 'block' : 'none';
}

function selectDdAction(action) {
    _ddCurrentAction = action;
    const labels = { url: '🔗 URL 생성', campaign: '📊 캠페인 생성', info: 'ℹ️ 서비스 정보' };
    document.getElementById('ddMainBtn').textContent = labels[action];
    document.getElementById('ddMenu').style.display = 'none';
    document.getElementById('ddCampFields').style.display = action === 'campaign' ? 'block' : 'none';
}

async function doDdAction() {
    const url    = document.getElementById('ddUrlInput').value.trim();
    const result = document.getElementById('ddResult');

    if (_ddCurrentAction === 'url') {
        const shortUrl = await FPLink.shorten(url);
        result.innerHTML = '<input type="text" value="' + shortUrl + '" readonly>';

    } else if (_ddCurrentAction === 'campaign') {
        const name = document.getElementById('ddCampName').value.trim();
        const shortUrl = await FPLink.shortenCampaign(url, { campaignName: name || '캠페인' });
        result.innerHTML = '<input type="text" value="' + shortUrl + '" readonly>';

    } else if (_ddCurrentAction === 'info') {
        const info = await FPLink.getInfo();
        result.textContent = JSON.stringify(info, null, 2);
    }
}

// 외부 클릭 시 드롭다운 닫기
document.addEventListener('click', () => {
    document.getElementById('ddMenu').style.display = 'none';
});

FPLink.getStats(code: string, type?: 'url' | 'campaign'): Promise<StatsResult>
//  code  — 단축 코드 또는 캠페인 alias. 전체 URL을 넘겨도 자동으로 코드를 추출합니다.
//  type  — 'url' (기본값) 또는 'campaign'
//          단, URL에 /c/ 경로가 포함된 경우 type을 생략해도 자동으로 캠페인으로 처리됩니다.
//          예) FPLink.getStats('https://fpl.fingerpush.link/c/summer2026')  → 캠페인 자동 감지

// type 생략 시 'url'이 기본값
const data = await FPLink.getStats('huNsKR');
// 전체 URL을 넘겨도 동작합니다
// const data = await FPLink.getStats('https://fpl.fingerpush.link/huNsKR');

console.log(data.shortCode);    // 'huNsKR'
console.log(data.totalClicks);  // 42
console.log(data.title);        // 'Summer Landing Page'
console.log(data.dailyClicks);  // { '2026-05-09': 3, '2026-05-10': 7, ... }

<button id="url-stats-btn">📈 URL 통계 보기</button>
<p id="url-stats-out"></p>

<script>
document.getElementById('url-stats-btn').addEventListener('click', async () => {
  const out = document.getElementById('url-stats-out');
  const data = await FPLink.getStats('huNsKR');          // type 생략 = 'url'
  out.textContent = `총 클릭 수: ${data.totalClicks}회`;
});
</script>

// 두 번째 인자에 'campaign' 지정
const data = await FPLink.getStats('summer2026', 'campaign');

console.log(data.alias);        // 'summer2026'
console.log(data.totalClicks);  // 315
console.log(data.name);         // '2026 여름 프로모션'
console.log(data.dailyClicks);  // { '2026-05-09': 30, '2026-05-10': 58, ... }

<button id="camp-stats-btn">📊 캠페인 통계 보기</button>
<p id="camp-stats-out"></p>

<script>
document.getElementById('camp-stats-btn').addEventListener('click', async () => {
  const out = document.getElementById('camp-stats-out');
  try {
    const data = await FPLink.getStats('summer2026', 'campaign');
    out.textContent = `캠페인 클릭 수: ${data.totalClicks}회`;
  } catch (e) {
    out.textContent = '❌ ' + e.message;
  }
});
</script>