> ## Documentation Index > Fetch the complete documentation index at: https://developers-partners.delivered.co.kr/llms.txt > Use this file to discover all available pages before exploring further. # 글로벌링크 사용하기 > 글로벌링크 기능을 웹사이트에서 제공하기 위해 컴포넌트를 추가하는 샘플 코드를 제공합니다. ## 1. 설치 가이드 ### 1-1. 사용 방법 **글로벌링크 기능**은 반드시 가맹점 웹사이트의 **상품 페이지**에 생성해야합니다. 각 컴포넌트는 두 가지 방식 중 하나를 선택하여 설치할 수 있습니다. 프로젝트의 구조나 선호도에 따라 적합한 방식을 선택하세요. * **인라인 스타일 버전**: 별도의 CSS 파일 없이 HTML 파일 하나로 구성되어 있습니다. * **HTML/CSS 분리 버전**: HTML과 CSS를 분리하여 관리할 수 있습니다. ### 1-2. 맞춤 설정 * **스타일 수정**: 브랜드 아이덴티티에 맞게 CSS를 수정하여 버튼이나 배경색 등을 변경할 수 있습니다. * **해외 사용 설정** : 글로벌링크를 해외 사용자인 경우에만 로드하는 경우, [해외 사용 설정하기](/site-setting) 문서를 참고해주세요. *** ## 2. Top Bar (링크형) 컴포넌트 **해당 컴포넌트는 이해를 돕기 위한 샘플입니다.** 링크와 함수가 가이드에 맞게 동일하게 동작한다면, 스타일은 자유롭게 수정하여 사용 가능합니다.

### 2-1. 기능 * 상품 페이지 상단에 "Buy Now" 버튼과 "We now ship to worldwide" 메시지를 표시합니다. * "Buy Now" 버튼은 사용자를 딜리버드 코리아 구매대행 요청 URL로 이동시킵니다. ### 2-2. 코드 설명 * **Buy Now 링크**: 현재 페이지의 URL을 `encodeURIComponent()`로 인코딩하여 딜리버드 코리아 구매대행 요청 URL에 포함시킵니다. ### 2-3. 컴포넌트 코드 **글로벌링크 기능**은 반드시 가맹점 웹사이트의 **상품 페이지**에 생성해야합니다. ```html HTML theme={null}

We now ship to worldwide

Buy Now

``` ```css CSS theme={null} /* 파일명을 gorder-style.css 로 생성하고 html의 head 내에 삽입된 경로를 파일의 위치로 수정해주세요 */ /* Global Order Header */ #gorder-header { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, #ff9123 0%, #fc6e1d 100%); height: 40px; padding: 8px 12px; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; } #gorder-header-left { display: flex; align-items: center; gap: 8px; } #gorder-header-left p { color: #ffffff; font-size: 16px; margin: 0; font-family: 'Wanted Sans Variable', Helvetica, sans-serif; } #gorder-btn { display: inline-flex; align-items: center; background-color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 2px 8px; text-decoration: none; cursor: pointer; } #gorder-btn div { color: #ffffff; font-weight: bold; font-size: 14px; font-family: 'Wanted Sans Variable', Helvetica, sans-serif; } /* Popup Modal */ #gorder-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 9999999; } /* Modal Container */ #gorder-modal { position: absolute; top: calc(50% - 285px); left: calc(50% - 272px); width: 544px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; z-index: 1; } /* art-img 영역 */ #gorder-art-img { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 36px; position: relative; z-index: 2; } /* Desktop Images */ #gorder-golink-pc-dk-icon, #gorder-golink-pc-clip-icon { width: 164px; max-height: 100%; object-fit: cover; } #gorder-golink-pc-clip-icon { width: 150px; } /* Mobile Images: 기본적으로 숨김 */ #gorder-golink-mo-dk-icon, #gorder-golink-mo-clip-icon { display: none; width: 130px; object-fit: cover; } /* bg-text 영역 */ #gorder-bg-text { width: 100%; height: 491px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 52px; box-sizing: border-box; background-image: url('https://images.delivered.co.kr/global-order/link/golink-pc-bg.png'); background-size: cover; background-repeat: no-repeat; background-position: top; margin-top: -40px; position: relative; z-index: 0; } /* text-group 영역 */ #gorder-text-group { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; text-align: center; font-size: 24px; color: #030712; font-family: 'Wanted Sans Variable', Helvetica, sans-serif; } /* title-disc */ #gorder-title-disc { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; } /* request-product-purchase-container */ #gorder-request-product-container { align-self: stretch; position: relative; line-height: 34.8px; font-weight: 600; } #gorder-request-product-container p { margin: 0; } /* delivered-korea-helps-container */ #gorder-delivered-korea-container { align-self: stretch; position: relative; font-size: 16px; line-height: 23.2px; color: #374151; } #gorder-delivered-korea-container p { margin: 0; } .gorder-delivered-koreas-purchasing { font-weight: 600; font-family: 'Wanted Sans Variable', Helvetica, sans-serif; color: #030712; } #gorder-delivered-korea-container span { font-family: 'Wanted Sans Variable', Helvetica, sans-serif; color: #374151; } /* btn-caption 영역 */ #gorder-btn-caption { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: left; font-size: 16px; color: #374151; } #gorder-btn-group { width: -webkit-fill-available; display: flex; flex-direction: row; align-items: center; gap: 8px; } #gorder-cancel { width: 150px; border-radius: 8px; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; padding: 12px 20px; cursor: pointer; } #gorder-cancel1 { line-height: 23.2px; margin: 0; } #gorder-shop-now { width: -webkit-fill-available; border-radius: 8px; background-color: #ff9123; display: flex; align-items: center; justify-content: center; padding: 12px 20px; gap: 8px; color: #fff; cursor: pointer; } #gorder-shop-now1 { line-height: 23.2px; font-weight: 600; margin: 0; } #gorder-golink-icon-next { width: 24px; max-height: 100%; object-fit: cover; } #gorder-if-pop-ups-are { font-size: 14px; line-height: 20.3px; color: #ef4444; text-align: center; } /* Responsive Mobile Styles (max-width: 541px) */ @media (max-width: 541px) { #gorder-modal { width: 375px; top: calc(50% - 310px); left: calc(50% - 187.5px); } #gorder-art-img { gap: 0px; } /* art-img: Hide desktop images, show mobile images */ #gorder-golink-pc-dk-icon, #gorder-golink-pc-clip-icon { display: none; } #gorder-golink-mo-dk-icon, #gorder-golink-mo-clip-icon { display: block; } /* bg-text: Mobile adjustments */ #gorder-bg-text { background-image: url('https://images.delivered.co.kr/global-order/link/golink-mo-bg.png'); padding: 60px 36px; margin-top: -30px; height: 555px; } /* text-group adjustments */ #gorder-text-group { gap: 40px; align-items: center; } /* Cancel button width */ #gorder-cancel { width: 100px; } /* Note text adjustments */ #gorder-if-pop-ups-are { font-size: 12px; line-height: 17.4px; } } ```