스카이스캐너의 다중 버티컬 검색 위젯을 통해 항공권 검색, 호텔 검색, 렌터카 검색 위젯의 모든 기능을 한 곳에서 활용할 수 있습니다. 이 위젯은 앞서 언급한 여행 위젯들을 포함하여 사용자가 직접 구성할 수 있는 탭 시스템을 제공합니다.

참고: 랜딩 페이지에서 최적의 형태로 표시되도록, 다구간 검색 모드를 사용하지 않을 경우 컨테이너 너비를 최소 300px 이상으로, 다구간 검색 모드를 사용할 경우에는 최소 500px 이상으로 설정해 주세요. 그렇지 않으면 스타일이 깨지는 현상이 발생할 수 있습니다.

중요 참고 사항: 웹사이트 리소스 제어를 위해 콘텐츠 보안 정책 헤더(CSP) 를 사용하는 경우, 다음 URL을 허용하도록 설정하세요. www.skyscanner.net, widgets.skyscanner.net, js.skyscnr.com, css.skyscnr.com.

제휴 ID 및 추적 기능

스카이스캐너와 직접 제휴 관계를 맺고 있는 경우, 이탈이 추적되도록 HTML 스니펫에 제휴 ID를 추가해야 합니다. 이를 위해서는 아래와 같이 HTML 스니펫에 data-associate-id="ABC_DEF_12345_56789"를 추가하세요.

제휴 ID를 모르는 경우, 계정 관리자에게 문의하여 ID를 받을 수 있습니다.

위젯 옵션

사용자 정의를 위해, 다중 버티컬 검색 위젯은 기본 제공되는 모든 하위 위젯에 허용되는 모든 속성을 허용합니다. 하위 위젯 옵션에 대한 자세한 내용은 다음 페이지를 참조하세요.

항공권 검색

호텔 검색

렌터카 검색  

skyscannerWidget

required

data-skyscanner-widget="MultiVerticalWidget"

위젯 유형을 정의하세요.

Show details

MultiVerticalWidget

locale

recommended

data-locale="ru-RU"

다음 중 하나를 사용할 수 있습니다.

"bg-BG", "ca-ES", "cs-CZ", "da-DK", "de-DE", "el-GR", "en-GB", "en-GG", "en-US", "es-ES", "es-MX", "fi-FI", "fr-BE", "fr-CH", "fr-FR", "hr-HR", "hu-HU", "id-ID", "it-CH", "it-IT", "ja-JP", "ko-KR", "ms-MY", "nb-NO", "nl-BE", "nl-NL", "pl-PL", "pt-BR", "pt-PT", "ro-RO", "ru-RU", "sk-SK", "sv-SE", "th-TH", "tl-PH", "tr-TR", "uk-UA", "vi-VN", "zh-CN", "zh-HK", "zh-SG", "zh-TW"

(참고: 'locale' 값은 대소문자를 구분합니다.)

Four letter locale code

"en-GB"

market

recommended

data-market="AU"

대상 스카이스캐너 도메인을 설정하세요.

(참고: 설정한 도메인에 따라 해당 지역 시장의 제한 사항이나 인벤토리가 달라지며, 이에 따라 표시되는 항공권 검색 결과에도 영향을 줄 수 있습니다.)

Two letter country code

"UK"

currency

recommended

data-currency="USD"

스카이스캐너 검색 결과로 리디렉션할 때 표시할 통화를 설정하세요.

Three letter currency code

"GBP"

associateId

optional

data-associate-id="ABC_DEF_12345_56789"

위젯 종료 시점을 추적할 수 있습니다.

제휴 ID는 담당 관리자를 통해 확인하거나 고객 센터로 문의 하여 안내받으실 수 있습니다.

Affiliate ID string

"WIG_WBT_01426_00001"

verticals

optional

data-verticals="hotels,cars"

사용 가능한 버티컬 탭을 쉼표로 구분된 값 문자열(항공편, 호텔, 렌터카)로 설정합니다.

Show details

List of flights, hotels, cars

All verticals

verticalsDefaultTab

optional

data-verticals-default-tab="cars"

처음 열린 검색 탭을 설정합니다.

Show details

One of "flights", "hotels", "cars"

The first visible tab

colour

optional

data-colour="solar"

위젯 배경색을 변경합니다.

Show details

Preset color name or hex code

transparent

fontColour

optional

data-font-colour="#000"

위젯 글꼴 색상을 변경합니다.

Show details

Preset color name or hex code

Autocalculated to contrast the background

buttonColour

optional

data-button-colour="dawn"

검색 버튼의 배경색을 변경합니다.

Show details

Preset color name or hex code

Blue

buttonFontColour

optional

data-button-font-colour="#fff"

검색 버튼의 글꼴 색상을 변경합니다.

Show details

Preset color name or hex code

Autocalculated to contrast the background of search button

widgetPadding

optional

data-widget-padding="10px 12px"

전체 위젯의 안쪽 여백을 설정합니다.

Show details

A number in pixels or a value of CSS "padding" rule

0

widgetBorderRadius

optional

data-widget-border-radius="4"

전체 위젯의 테두리 둥글림 반경을 설정합니다.

Show details

A number in pixels or a value of CSS "border-radius" rule

0

widgetScale

optional

data-widget-scale="1.3"

전체 위젯 크기를 조정합니다.
위젯이 원래 크기의 몇 배가 되어야 하는지 값을 설정합니다.

Float number

1

utmTerm

optional

data-utm-term="blog"

Impact에서 SubId2로 보고되는 추가 영숫자 추적 매개변수입니다.

Alphanumeric value with a maximum length of 255

zIndex

optional

data-z-index="100"

위젯 컨테이너의 z-index입니다.

Number

500

webOnlyRedirects

optional

data-web-only-redirects="true"

여행자를 스카이스캐너 앱으로 리디렉션할지 여부를 결정합니다. 'true'로 설정하면 초기 리디렉션 시 스카이스캐너 앱이 열리지 않습니다.

true / false

false

위젯 빌더

여기에서 위젯 매개변수를 조정하고 왼쪽의 사이드 패널을 사용하여 원하는 다중 버티컬 검색 위젯을 구성할 수 있습니다. 다양한 선택지가 있으니 꼭 맞는 설정을 찾아보세요!