---
title: "顧客体験の声を創り出す"
slug: "create-a-voice-of-the-customer-experience"
abstract: "サイト訪問者の期待、好み、嫌悪感を捉えるフィードバックウィジェットを作成し、ネットプロモータースコア(NPS)を算出しましょう。"
---
# 顧客体験の声を創り出す

顧客の声(VOC)体験は、顧客のフィードバックを集め、彼らの期待や好み、懸念事項について洞察を提供する効果的なツールです。このデータを分析することで、全体的な顧客満足度を追跡し、ビジネス慣行を改善するための情報に基づいた意思決定が可能になります。

例えば、フライト予約ページにフィードバックボタンを埋め込むことで、顧客はフライト検索や予約の際に簡単に意見を入力できます。この種のフィードバック機能はVOC体験の重要な要素であり、ユーザーからのリアルタイムフィードバックを収集してサービス向上を支援します。

![VOCframerate.gif](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/VOCframerate.gif)

このウォークスルーでは、VOC体験の作成と、顧客フィードバックをキャプチャするためのストリームFEEDBACKイベント送信のプロセスを案内します。収集されたデータは[Voice of the Customer Dashboard](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/voice-of-customer-dashboard.html "Voice of Customer dashboard")に反映され、Net Promoter Score(NPS)やCustomer Satisfaction Score(CSAT)などの指標を監視できます。

このウォークスルーでは、以下の方法を説明します:

1.  [カスタムウェブテンプレートを使ってVOC体験を作成しましょう。](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/create-a-voice-of-the-customer-experience.html#UUID-83ff00cc-d19c-fc7f-fcfa-0cbb76310fdc_section-idm1703457122231816 "Create a VOC experience using a custom web template")
2.  [フィードバックイベントをフォーマットして送信し、顧客のフィードバックを収集しましょう。](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/create-a-voice-of-the-customer-experience.html#UUID-83ff00cc-d19c-fc7f-fcfa-0cbb76310fdc_section-idm1703457122340062 "Format and send a FEEDBACK event")

## カスタムウェブテンプレートを使ってVOC体験を作成する

この手順では、カスタムウェブテンプレートを作成し、HTML、CSS、JavaScriptコードを設定することでVOCのウェブ体験を作成する方法を示します。

カスタムウェブテンプレートを使ってVOC体験を作成するには:

1.  ナビゲーションメニューで「 **体験**」をクリックします。
    
2.  経験リストで「**ウェブ作成**」>クリックしてください。
    
3.  「 **体験名付け」** ダイアログで、顧客体験の声の名前を入力してください。Sitecore Personalize体験に名前を付けると [自動的にIDが作成され](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-sitecore-personalize/using-ids-in-sitecore-personalize.html "Using IDs in Sitecore Personalize") ます。
    
4.  新しい体験を作成するには **「作成** 」をクリックしてください。
    
5.  **エクスペリエンス**タイルで「**バリアントを作成**」をクリックします。
    
6.  カスタム[コード](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-web-experiences-in-sitecore-personalize/create-a-web-experience/create-content-for-a-web-experience-using-custom-code.html "Create content for a web experience using custom code")を使って新しいウェブテンプレートを作成するには「**テンプレートを作成**」をクリックしてください。コードエディターはHTML、CSS、JavaScript、FreeMarkerを使ってテンプレートをカスタマイズできるように表示します。
    
7.  以下のHTML、CSS、JavaScriptコードを該当するタブにコピー&ペーストし、**保存をクリックします。**VOCのウェブ体験をプレビューして、組織のウェブサイト上でどのように表示されるか確認できます。
    
    ### HTML
    
    <div id="bx-modal\_overlay">
     <div class="bx-modal\_content abper-112-modal">
    
     <div class="bx-options" id="bx-options">
     <div id="abper-112-feedback-content" class="abper-112-feedback-content">
     <a class="abper-112-link abper-112-feedback abper-112-submit-feedback" href="https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/Button%20Link%201%20|%20string%20|%20#" id="bx-feedback\_option" role="link" tabindex="0">
     <i class="abper-112-icon abper-112-icon-feedback"></i>
     <h2 class="abper-112-title">Title 1 | string | Leave website feedback</h2>
     <hr class="abper-112-hr">
     <p class="abper-112-text">Message 1 | text | Your opinion is important to us. Help us improve your online experience</p>
     <span class="abper-112-button abper-112-secondary abper-112-submit-feedback">Button text 1 | string | Submit feedback</span>
     </a>
     <a class="abper-112-link abper-112-contact" id="bx-contact\_link" href="https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/Button%20link%202%20|%20string%20|%20#" role="link"
     tabindex="0">
     <i class="abper-112-icon abper-112-icon-contact"></i>
     <h2 class="abper-112-title">Title 2 | string | Get in touch</h2>
     <hr class="abper-112-hr">
     <p class="abper-112-text">Message 2 | text | Need answers? Here are the most convenient ways to contact us</p>
     <span class="abper-112-button abper-112-secondary">Button text 2 | string | Contact us</span>
     </a>
     <a class="abper-112-link abper-112-complaint" id="bx-complaint\_link" href="https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/Button%20link%203%20|%20string%20|%20#" role="link" tabindex="0">
     <i class="abper-112-icon abper-112-icon-complaint"></i>
     <h2 class="abper-112-title">Title 3 | string | Raise a concern</h2>
     <hr class="abper-112-hr">
     <p class="abper-112-text"> Message 3 | text | If you've had a less than satisfying experience, we'd like to hear from you</p>
     <span class="abper-112-button abper-112-secondary">Button text 3 | string | Submit a complaint</span>
     </a>
     </div>
     </div>
    
     <div class="bx-rating bx-hidden qubit-VisitorPulse-question" id="bx-rating">
     <h1 class="bx-header\_question" id="bx-header\_question">How satisfied were you with your website experience?</h1>
     <fieldset class="rating" id="bx-rating\_buttons">
     <input type="radio" id="star5" name="rating" value="5" /><label class="bx-star5" for="star5" title="Excellent"></label>
     <input type="radio" id="star4" name="rating" value="4" /><label class="bx-star4" for="star4" title="Good"></label>
     <input type="radio" id="star3" name="rating" value="3" /><label class="bx-star3" for="star3" title="Average"></label>
     <input type="radio" id="star2" name="rating" value="2" /><label class="bx-star2" for="star2" title="Poor"></label>
     <input type="radio" id="star1" name="rating" value="1" /><label class="bx-star1" for="star1" title="Very Poor"></label>
     <span class="bx-radio\_label bx-label5">Excellent</span>
     <span class="bx-radio\_label bx-label4">Good</span>
     <span class="bx-radio\_label bx-label3">Average</span>
     <span class="bx-radio\_label bx-label2">Poor</span>
     <span class="bx-radio\_label bx-label1">Very Poor</span>
     </fieldset>
     </div>
    
     <div class="bx-comment bx-hidden" id="bx-comment">
     <h1 class="bx-header\_question">How satisfied were you with your website experience?</h1>
     <textarea class="bx-comment\_textarea" id="bx-comment\_textarea" maxlength="1500" placeholder="Tell us how we can make your experience better\*"></textarea>
     <div class="bx-comment\_warning">\* Do not enter personal information here</div>
     <div class="bx-comment\_submit qubit-VisitorPulse-submit" id="bx-submit\_feedback" role="button" tabindex="0">Submit feedback</div>
     </div>
    
     <div class="bx-thank\_you bx-hidden" id="bx-thank\_you">
     <div class="qubit-VisitorPulse-thankYou" aria-hidden="false">
     <div class="abper-112-thank-you">
     <i class="abper-112-icon-check abper-112-hidden-desktop"></i>
     <div class="qubit-VisitorPulse-thankYouText">Thank you for your feedback</div>
     <i class="abper-112-icon-check abper-112-hidden-mobile"></i>
     <p class="abper-112-text">If you have any questions or need help please visit our
     <a class="abper-112-faq-link" id="bx-faq\_link" href="https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/create-a-voice-of-the-customer-experience.html#"
     title="">Resources</a> or
     <a class="abper-112-contact-us-link" id="bx-contact\_link2" href="https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/create-a-voice-of-the-customer-experience.html#"
     title="">Contact us</a> section.
     </p>
     </div>
     <button aria-label="Close" class="abper-112-button abper-112-primary abper-112-close-button" id="bx-close">Close</button>
     </div>
     </div>
    
     <div class="bx-modal\_\_btn-close-icon"></div>
     </div>
    </div>
    
    ### CSS
    
    #bx-modal\_overlay {
     display: none;
     justify-content: center;
     align-items: center;
     position: fixed;
     z-index: 999999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background-color: rgba(0,0,0,0.4);
     font-family: Arial,HelveticaNeue,Helvetica Neue,Helvetica,Lucida Grande,sans-serif;
    }
    
    #bx-modal\_overlay .bx-modal\_content {
     display: flex;
     flex-direction: column;
     position:relative;
     background-color: #F6F6F6;
     margin: 0 auto;
     border-radius: 4px;
     box-shadow: 0 2px 10px 6px rgba(0,0,0,0.3);
     height: 100%;
     width: 100%;
     border: none;
    }
    
    @media screen and (min-width: 1024px) {
     #bx-modal\_overlay .bx-modal\_content {
     max-width: 1056px;
     height: auto;
     min-height: 100px;
     width: auto;
     }
    }
    
    #bx-modal\_overlay .bx-modal\_button-wrapper {
     display: flex;
     margin-top: auto;
    }
    
    #bx-modal\_overlay .bx-modal\_button {
     display: inline-block;
     border-radius: 4px;
     color: #fff;
     background-color: #00B377;
     padding: 10px 23px;
    }
    
    .bx-hidden {
     display: none ;
    }
    
    .bx-hidden\_important {
     display: none !important;
    }
    
    /\* Options Screen \*/
    .bx-options {
     display: flex;
    }
    
    .bx-options .abper-112-text {
     flex-grow: 1;
     font-size: 14px;
     line-height: 1.5;
     margin: 16px 0 30px;
     padding-bottom: 0;
    }
    
    .abper-112-link {
     cursor: pointer;
    }
    
    /\* Radio button modal \*/
    
    .bx-modal\_content h1 {
     font-size: 30px;
     line-height: 34px;
     font-family: Georgia,"Times New Roman",Times,serif !important;
     max-width: 90%;
     margin: auto;
     text-align: center;
    }
    
    .bx-modal\_content {
     text-align: center;
    }
    
    .bx-comment > .bx-comment\_textarea {
     height: 174px;
     width: 80%;
     border: 1px solid #666;
     border-radius: 3px;
     padding: 15px 18px 16px 20px;
     resize: none;
     margin: 10px auto 10px;
     font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 16px;
     font-weight: 300;
    }
    
    .bx-comment > .bx-comment\_warning {
     color: #999;
     text-align: left;
     width: 80%;
     margin: 10px auto 30px;
     font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 16px;
     font-style: italic;
     font-weight: 300;
    }
    
    /\* Rating screen \*/
    .bx-modal\_content > #bx-rating {
     padding: 30px 20px 20px;
    }
    
    .bx-radio\_label {
     display: none;
    }
    
    @media screen and (min-width: 1024px) {
     .bx-radio\_label {
     right: 0;
     left: 0;
     bottom: 10px;
     position: absolute;
     font-size: 14px;
     }
    
     .rating .bx-star5:hover ~ .bx-label5 {
     display: block;
     }
    
     .rating .bx-star4:hover ~ .bx-label4 {
     display: block;
     }
    
     .rating .bx-star3:hover ~ .bx-label3 {
     display: block;
     }
    
     .rating .bx-star2:hover ~ .bx-label2 {
     display: block;
     }
    
     .rating .bx-star1:hover ~ .bx-label1 {
     display: block;
     }
    }
    
    /\* Rating Stars \*/
    .rating {
     display: inline-block;
     border: none;
     height: 75px;
    }
    
    /\* :not(:checked) is a filter, so that browsers that don’t support :checked don’t
     follow these rules. Every browser that supports :checked also supports :not(), so
     it doesn’t make the test unnecessarily selective \*/
    .rating:not(:checked) > input {
     position:absolute;
     top:-9999px;
     clip:rect(0,0,0,0);
    }
    
    .rating:not(:checked) > label {
     float:right;
     padding:0.3em .1em;
     overflow:hidden;
     white-space:nowrap;
     cursor:pointer;
     font-size:300%;
     line-height:1.2;
     color:#ddd;
    }
    
    .rating:not(:checked) > label:before {
     content: url(https://c.ekstatic.net/ecl/iconography/e72585a018510638901dd029c05d0724\_40\_38.png);
    }
    
    .rating > input:checked ~ label {
     content: url(https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016\_40\_38.png);
    }
    
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
     content: url(https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016\_40\_38.png);
    }
    
    .rating > input:checked + label:hover,
    .rating > input:checked + label:hover ~ label,
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > label:hover ~ input:checked ~ label {
     content: url(https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016\_40\_38.png);
    }
    
    .rating > label:active {
     position:relative;
     top:2px;
     left:2px;
    }
    
    /\* Comment Screen \*/
    .bx-comment {
     padding: 30px 20px 20px;
    }
    
    /\* Thank You Screen \*/
    .bx-thank\_you {
     padding: 30px 20px 20px;
    }
    
    /\* close button \*/
    .bx-modal\_\_btn-close-icon {
     background: transparent;
     top: 0;
     right: 0;
     width: 30px;
     height: 30px;
     margin-top: 20px;
     margin-right: 25px;
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
    }
    
    .bx-modal\_\_btn-close-icon:after {
     content: '';
     height: 30px;
     border-left: 2px solid #75808F;
     position: absolute;
     transform: rotate(45deg);
    }
    
    .bx-modal\_\_btn-close-icon:before {
     content: '';
     height: 30px;
     border-left: 2px solid #75808F;
     position: absolute;
     transform: rotate(-45deg);
    }
    
    /\* Comment Screen \*/
    
     /\*font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;\*/
    
    /\* Mobile Web Feedback Button \*/
    .abper-112-toggle .bx-mobile\_web\_feedback\_button {
     padding: 15px 25px;
    }
    
    @media screen and (min-width: 1024px) {
     .abper-112-toggle .bx-mobile\_web\_feedback\_button {
     padding: 0;
     }
    }
    
    /\*\*\*\*\*\*\* EK CSS \*\*\*\*\*\*\*/
    
    @font-face {
     font-family: ek-font-icons;
     src: url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.eot);
     src: url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.ttf) format("truetype"), url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.svg#ek-font-icons) format("svg");
     font-weight: 400;
     font-style: normal;
    }
    
    @font-face {
     font-family: heroic-condensed-black-oblique;
     src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.eot);
     src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.ttf) format("truetype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.svg#heroic-condensed-black-oblique) format("svg");
     font-weight: 400;
     font-style: normal;
    }
    
    @font-face {
     font-family: heroic-condensed-medium-oblique;
     src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.eot);
     src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.ttf) format("truetype");
     font-weight: 400;
     font-style: normal;
    }
    
    @font-face {
     font-family: heroic-condensed-light-oblique;
     src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.eot);
     src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.ttf) format("truetype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.svg#heroic-condensed-light-oblique) format("svg");
     font-weight: 400;
     font-style: normal;
    }
    
    /\*.abper-112-modal {
    tabindex:focus {
     border: none;
     border-radius: 3px;
     box-shadow: none;
     outline: none;
    }\*/
    
    a {
     text-decoration: underline;
    }
    
    a:active,
    a:focus,
    a:hover {
     text-decoration: none;
    }
    
    .abper-112-modal.qubit-AdvancedModal {
     align-items: normal;
     left: auto;
     padding: 0;
     right: auto;
     width: 100%;
     z-index: 9999;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal.qubit-AdvancedModal {
     align-items: center;
     }
    }
    @media (max-width: 768px) {
     .abper-112-modal .qubit-AdvancedModal-body {
     height: 100%;
     }
    }
    .abper-112-modal .qubit-AdvancedModal-box {
     background-color: #f6f6f6;
     display: block;
     height: 100%;
     max-height: none;
     width: 100%;
     z-index: 9999;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-AdvancedModal-box {
     height: auto;
     width: auto;
     }
    }
    .abper-112-modal .qubit-AdvancedModal-Icon {
     color: #333;
     font-size: 10px;
    }
    .abper-112-modal .qubit-VisitorPulse {
     color: #333;
     display: flex;
     font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 16px;
     flex-grow: 1;
     margin: auto;
    }
    .abper-112-modal .qubit-VisitorPulse-content {
     display: flex;
     margin: 0 auto;
     overflow: auto;
     padding: 30px 20px 20px;
     width: 100%;
    }
    @media screen and (min-width: 768px) {
     .abper-112-modal .qubit-VisitorPulse-content {
     margin: auto;
     }
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-content {
     display: block;
     margin: 0 auto;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-titleContainer {
     display: none;
    }
    .abper-112-modal .qubit-VisitorPulse-question {
     border-bottom: none;
     margin-bottom: 0;
     max-width: 690px;
     padding-bottom: 0;
     text-align: center;
    }
    .abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-questionName {
     color: #333;
     font-family: Helvetica, Arial, Lucida Grande, sans-serif !important;
     font-size: 20px;
     font-weight: 400;
     line-height: 24px;
     margin: 0 auto 20px;
     text-align: center;
     width: 80%;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-questionName {
     font-size: 30px;
     line-height: 34px;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-radios {
     height: 75px;
     position: relative;
     width: 260px;
    }
    .abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-radio input {
     display: none;
    }
    .abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio {
     display: inline-block;
     margin-bottom: 0;
     text-align: center;
     width: 20%;
    }
    .abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioOuter {
     background: url('https://c.ekstatic.net/ecl/iconography/e72585a018510638901dd029c05d0724\_40\_38.png');
     background-repeat: no-repeat;
     height: 40px;
     margin: 0;
     width: 40px;
    }
    .abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio.abper-112-active .qubit-VisitorPulse-radioOuter {
     background: url('https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016\_40\_38.png');
     background-repeat: no-repeat;
    }
    .abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioInner {
     display: none;
    }
    .abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioText {
     bottom: 10px;
     display: none;
     font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 14px;
     font-weight: normal;
     left: 0;
     margin: 0 auto;
     position: absolute;
     right: 0;
     width: 100%;
    }
    .abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioText.abper-112-visible {
     display: inline-block;
    }
    .abper-112-modal .qubit-VisitorPulse-question:nth-child(2) {
     display: none;
    }
    .abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .qubit-VisitorPulse-textarea {
     background: #fff;
     border: 1px solid #666;
     border-radius: 3px;
     box-shadow: inset 4px 4px 0 0 #f6f6f6;
     color: #333;
     display: block;
     font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 16px;
     font-weight: 300;
     height: 214px;
     margin: auto;
     padding: 20px 18px 16px 20px;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .qubit-VisitorPulse-textarea {
     height: 174px;
     width: 80%;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .abper-112-optional {
     color: #999;
     font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 16px;
     font-style: italic;
     font-weight: 300;
     margin: 10px auto 30px;
     text-align: left;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .abper-112-optional {
     width: 80%;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-question.abper-112-visible {
     display: block;
    }
    .abper-112-modal .qubit-VisitorPulse-question.abper-112-hide {
     display: none;
     visibility: hidden;
    }
    .abper-112-modal .qubit-VisitorPulse-submit {
     background-color: #c60c30;
     border-color: #c60c30;
     color: #fff;
     display: inline-block;
     font-size: 14px;
     font-weight: bold;
     height: auto;
     line-height: normal;
     margin: auto 0 0;
     max-width: 690px;
     width: 100%;
    }
    @media screen and (min-width: 768px) {
     .abper-112-modal .qubit-VisitorPulse-submit {
     margin: 0 auto;
     }
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-submit {
     width: 317px;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-submit:hover {
     background-color: #c60c30;
     border-color: #c60c30;
     box-shadow: 0 0 6px 0 #333;
     color: #fff;
    }
    .abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
     display: inline-block;
     visibility: visible;
    }
    .abper-112-modal .qubit-VisitorPulse-thankYou {
     flex-direction: column;
     flex-grow: 1;
     margin: 0 auto;
     max-width: 690px;
     overflow: auto;
     padding: 40px 20px 20px;
     text-align: center;
    }
    @media screen and (min-width: 768px) {
     .abper-112-modal .qubit-VisitorPulse-thankYou {
     margin: auto;
     }
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-thankYou {
     margin: 0 auto;
     overflow: hidden;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-icon-check {
     border: 2px solid green;
     border-radius: 50px;
     box-sizing: border-box;
     height: 70px;
     margin: 0 auto 30px;
     width: 70px;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-icon-check {
     margin: 40px auto 20px;
     height: 60px;
     width: 60px;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-icon-check::before {
     border-bottom: 2px solid green;
     border-right: 2px solid green;
     box-sizing: border-box;
     content: '';
     display: inline-block;
     height: 30px;
     margin-top: -5px;
     position: relative;
     top: 50%;
     transform: rotate(45deg) translateX(-60%) translateY(-35%);
     width: 15px;
    }
    .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-text {
     flex-grow: 0;
     padding-left: 0;
     padding-right: 0;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-text {
     margin-bottom: 30px;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-close-button {
     margin: auto 0 0;
    }
    @media screen and (min-width: 768px) {
     .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-close-button {
     margin: 0;
     }
    }
    .abper-112-modal .abper-112-tripadvisor {
     border-top: 2px solid #d8d8d8;
     flex-grow: 1;
     padding: 20px 0 0;
    }
    .abper-112-modal .abper-112-tripadvisor.abper-112-tripadvisor-hide {
     display: none;
    }
    .abper-112-modal .abper-112-tripadvisor-logo {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     display: inline-block;
     height: 80px;
     margin: auto;
     width: 100px;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .abper-112-tripadvisor-logo {
     height: 50px;
     position: relative;
     top: -10px;
     width: 63px;
     vertical-align: middle;
     }
    }
    .abper-112-modal .abper-112-tripadvisor-copy {
     display: inline-block;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .abper-112-tripadvisor-copy {
     text-align: left;
     width: 70%;
     }
    }
    .abper-112-modal .abper-112-close-button {
     font-size: 16px;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 20px;
     min-height: 40px;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-modal .abper-112-close-button {
     width: 317px;
     }
    }
    .abper-112-modal .abper-112-text {
     flex-grow: 1;
     font-size: 14px;
     line-height: 1.5;
     margin: 16px 0 30px;
     padding-bottom: 0;
    }
    .abper-112-modal a,
    .abper-112-modal a:hover {
     color: #333;
    }
    .abper-112-modal:hover,
    .abper-112-modal:active,
    .abper-112-modal:focus {
     outline: none !important;
    }
    .abper-112-modal \*:focus {
     outline: none !important;
    }
    .abper-112-toggle {
     border-top: 1px solid rgba(255, 255, 255, .13);
     margin-top: auto;
    }
    .abper-112-toggle:hover,
    .abper-112-toggle:active,
    .abper-112-toggle:focus {
     outline: none;
    }
    .abper-112-toggle+.country-selector-mobile {
     margin-top: 0;
    }
    .abper-112-toggle .abper-112-text {
     color: #fff;
     cursor: pointer;
     display: inline-block;
     font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 14px;
     position: relative;
     vertical-align: middle;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-toggle .abper-112-text {
     color: #333;
     width: auto;
     }
    }
    @media screen and (min-width: 1024px) {
     .abper-112-toggle {
     background-color: #fff;
     border-radius: 3px 3px 0 0;
     box-shadow: 0 1px 4px 1px #666;
     color: #333;
     cursor: pointer;
     font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 14px;
     height: 40px;
     overflow: hidden;
     padding: 10px 15px 25px 25px;
     position: fixed;
     right: 0;
     top: calc(50% - 120px);
     transform: rotate(-90deg);
     transform-origin: 100% 100%;
     z-index: 99;
     }
    }
    @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
     .abper-112-toggle {
     top: calc(25% - 120px);
     }
    }
    .abper-112-toggle .abper-112-toggle-container {
     position: relative;
    }
    .abper-112-toggle .abper-112-icon {
     background-image: url('https://c.ekstatic.net/ecl/iconography/4fb725e86a700af2f5a185035d78d864\_48\_42.png');
     background-size: cover;
     display: inline-block;
     height: 22px;
     vertical-align: middle;
     width: 25px;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-toggle .abper-112-icon {
     background-image: url('https://c.ekstatic.net/ecl/iconography/9a9731bdeeac7dabae8183d63729c015\_81\_68.png');
     height: 20px;
     position: absolute;
     transform: rotate(90deg) translateY(15px);
     }
    }
    .abper-112-toggle .abper-112-text {
     display: none;
     line-height: 20px;
     padding: 0 0 0 15px;
    }
    .qubit-VisitorPulse-modal {
     display: none;
    }
    #abper-112-feedback-content {
     font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     margin: 0 auto;
     max-width: 690px;
     padding: 70px 10px;
     text-align: center;
     width: 100%;
    }
    @media screen and (min-width: 768px) {
     #abper-112-feedback-content {
     margin: auto;
     }
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content {
     display: flex;
     margin: 0 auto;
     max-width: 1056px;
     padding: 60px 40px;
     }
    }
    #abper-112-feedback-content .abper-112-feedback,
    #abper-112-feedback-content .abper-112-contact,
    #abper-112-feedback-content .abper-112-complaint {
     background-color: #fff;
     border-radius: 3px;
     box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.19);
     display: block;
     margin-bottom: 20px;
     padding: 10px 10px 0;
     position: relative;
     text-decoration: none;
    }
    #abper-112-feedback-content .abper-112-feedback span.abper-112-button,
    #abper-112-feedback-content .abper-112-contact span.abper-112-button,
    #abper-112-feedback-content .abper-112-complaint span.abper-112-button {
     pointer-events: none;
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content .abper-112-feedback,
     #abper-112-feedback-content .abper-112-contact,
     #abper-112-feedback-content .abper-112-complaint {
     background: none;
     border-radius: 0;
     box-shadow: none;
     display: flex;
     flex-basis: auto;
     flex-direction: column;
     margin: 0;
     padding: 30px;
     width: 33.3333%;
     }
    
     #abper-112-feedback-content .abper-112-feedback::after,
     #abper-112-feedback-content .abper-112-contact::after,
     #abper-112-feedback-content .abper-112-complaint::after {
     border-right: 1px solid #d8d8d8;
     content: "";
     display: block;
     height: 100%;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1;
     }
    }
    #abper-112-feedback-content .abper-112-title {
     text-align: center;
    }
    #abper-112-feedback-content .abper-112-title,
    #abper-112-feedback-content .abper-112-hr,
    #abper-112-feedback-content .abper-112-text {
     display: none;
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content .abper-112-title,
     #abper-112-feedback-content .abper-112-hr,
     #abper-112-feedback-content .abper-112-text {
     display: inline-block;
     }
    }
    #abper-112-feedback-content .abper-112-complaint::after {
     border: none;
    }
    @media screen and (max-width: 1023px) {
     #abper-112-feedback-content .abper-112-button,
     #abper-112-feedback-content .abper-112-button:hover {
     background: none;
     border: none;
     box-shadow: none;
     color: #333;
     font-weight: bold;
     margin-bottom: 10px;
     padding: 6px;
     width: 100%;
     }
    }
    #abper-112-feedback-content .abper-112-icon {
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     display: inline-block;
     height: 55px;
     margin: 0 auto;
     width: 60px;
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content .abper-112-icon {
     height: 68px;
     margin: 0 auto 20px;
     width: 80px;
     }
    }
    #abper-112-feedback-content .abper-112-icon-feedback {
     background-image: url('https://c.ekstatic.net/ecl/iconography/9a149a9f19b5506ca8a908f23f01c24f\_60\_60.png');
     height: 34px;
     width: 34px;
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content .abper-112-icon-feedback {
     background-image: url('https://c.ekstatic.net/ecl/iconography/9a9731bdeeac7dabae8183d63729c015\_81\_68.png');
     height: 68px;
     width: 81px;
     }
    }
    #abper-112-feedback-content .abper-112-icon-contact {
     background-image: url('https://c.ekstatic.net/ecl/iconography/dcb2d20bb523a4d1b635194758896024\_60\_60.png');
     height: 34px;
     width: 34px;
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content .abper-112-icon-contact {
     background-image: url('https://c.ekstatic.net/ecl/iconography/c8be9d69c9aa7b9c193ce1049e616f36\_81\_68.png');
     height: 68px;
     width: 81px;
     }
    }
    #abper-112-feedback-content .abper-112-icon-complaint {
     background-image: url('https://c.ekstatic.net/ecl/iconography/f633a3e3102979ba5c912a4b09c74c86\_60\_60.png');
     height: 34px;
     width: 34px;
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content .abper-112-icon-complaint {
     background-image: url('https://c.ekstatic.net/ecl/iconography/fbc91a6287d56b2f84607070934ba7d8\_81\_68.png');
     height: 68px;
     width: 81px;
     }
    }
    #abper-112-feedback-content .abper-112-title,
    .abper-112-thank-you .qubit-VisitorPulse-thankYouText {
     color: #333;
     font-family: Helvetica, Arial, Lucida Grande, sans-serif !important;
     font-size: 20px;
     font-weight: 400;
     line-height: 24px;
     margin: 0;
    }
    @media screen and (min-width: 1024px) {
     #abper-112-feedback-content .abper-112-title,
     .abper-112-thank-you .qubit-VisitorPulse-thankYouText {
     font-size: 30px;
     line-height: 34px;
     }
    }
    .abper-112-modal .qubit-VisitorPulse-thankYouText {
     font-size: 30px;
     line-height: 1.25;
     margin: 0;
    }
    hr.abper-112-hr {
     background: none;
     border: none;
     border-top: 2px solid #c60c30;
     display: inline-block;
     margin: 0 auto;
     width: 60px;
    }
    .abper-112-button,
    .qubit-VisitorPulse-submit {
     background-color: #fff;
     border: 1px solid #333;
     border-radius: 3px;
     color: #333;
     cursor: pointer;
     display: inline-block;
     font-size: 14px;
     font-weight: bold;
     line-height: normal;
     margin-bottom: 20px;
     padding: 11px;
     text-align: center;
     text-decoration: none;
     width: 100%;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-button,
     .qubit-VisitorPulse-submit {
     width: auto;
     }
    }
    .abper-112-button:hover,
    .qubit-VisitorPulse-submit:hover {
     box-shadow: 0 0 6px 0 #666;
    }
    .abper-112-button.abper-112-primary,
    .qubit-VisitorPulse-submit.abper-112-primary {
     background-color: #c60c30;
     border-color: #c60c30;
     color: #fff;
     font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
     font-size: 14px;
     font-weight: 700;
    }
    .abper-112-button.abper-112-primary:hover,
    .qubit-VisitorPulse-submit.abper-112-primary:hover {
     background-color: #c60c30;
     border-color: #c60c30;
     color: #fff;
    }
    .abper-112--focus {
     border-radius: 2px !important;
     box-shadow: 0 0 2px 1.5px #fff, 0 0 3px 3px #000, inset 0 0 0.5px 0.5px #fff, inset 0 0 0.5px 1.5px #000 !important;
     outline: 0 !important;
    }
    .qubit-VisitorPulse-hidden {
     visibility: hidden;
    }
    @media (max-width: 480px) {
     .ekglobal-navigation-megamenu-holder.menu--opened {
     overflow-y: scroll;
     }
    }
    @media (orientation: portrait) {
     .abper-112-modal .qubit-VisitorPulse {
     display: block;
     }
    
     .abper-112-modal .qubit-AdvancedModal-body {
     flex: none;
     height: 100%;
     }
    
     .abper-112-modal .qubit-VisitorPulse {
     display: block;
     }
    
     .abper-112-modal .qubit-VisitorPulse-content {
     height: 100%;
     position: relative;
     }
    
     .abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
     bottom: 30px;
     left: 20px;
     right: 20px;
     position: absolute;
     width: auto;
     }
    
     .abper-112-modal .qubit-VisitorPulse-thankYou {
     height: 100%;
     position: relative;
     }
    }
    @media (orientation: portrait) and (min-width: 768px) {
     .abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
     bottom: 60px;
     left: 30px;
     right: 30px;
     }
    }
    @media (orientation: portrait) and (min-width: 1024px) {
     .abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
     bottom: auto;
     left: auto;
     position: relative;
     right: auto;
     width: 317px;
     }
    }
    @media (orientation: portrait) and (min-width: 768px) {
     .abper-112-modal .abper-112-button.abper-112-primary.abper-112-close-button {
     bottom: 60px;
     left: 0;
     max-width: 690px;
     position: absolute;
     }
    }
    @media (orientation: portrait) and (min-width: 1024px) {
     .abper-112-modal .abper-112-button.abper-112-primary.abper-112-close-button {
     bottom: auto;
     left: auto;
     position: relative;
     right: auto;
     }
    }
    .ek .abper-112-modal contentEditable=true:not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal tabindex:not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal a:not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal area:not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal button:not(disabled):not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal iframe:not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal input:not(disabled):not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal select:not(disabled):not(tabindex='-1'):not(.panel-disabled):focus,
    .ek .abper-112-modal textarea:not(disabled):not(tabindex='-1'):not(.panel-disabled):focus {
     outline: none !important;
    }
    .ek .abper-112-modal p a {
     text-decoration: underline;
    }
    .ek .abper-112-modal p a:hover {
     text-decoration: none;
    }
    @media screen and (min-width: 1024px) {
     .ek-global-navigation .abper-112-toggletabindex="0":focus {
     border-radius: 3px 3px 0 0 !important;
     box-shadow: 0 1px 4px 1px #666 !important;
     }
    }
    .abper-112-toggletabindex:focus:not(a):not(button) {
     border-radius: 0;
     box-shadow: none;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-toggletabindex:focus:not(a):not(button) {
     border-radius: 3px 3px 0 0;
     box-shadow: 0 1px 4px 1px #666;
     }
    }
    .abper-112-modal a:focus {
     border-radius: none;
     box-shadow: none;
    }
    .page-template.leaderboard-template .abper-112-toggle {
     height: 5px;
    }
    .ekglobal-navigation-megamenu-holder.menu--opened .abper-112-toggle {
     height: auto;
    }
    .abper-112-modal label.qubit-VisitorPulse-radio \* {
     pointer-events: none;
    }
    .abper-112-modal \* {
     -webkit-tap-highlight-color: transparent;
    }
    .abper-112-toggle {
     display: none;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-toggle {
     display: block;
     }
    }
    .abper-112-toggle+.nav\_\_lang-wrapper {
     margin-top: 0;
    }
    .nav--show .abper-112-toggle {
     display: block;
    }
    .ek-global-navigation .menu--opened .abper-112-toggle,
    .main-navigation\_\_nav .nav--mobile .abper-112-toggle {
     display: block;
    }
    @media screen and (min-width: 1024px) {
     .ek-global-navigation .menu--opened .abper-112-toggle,
     .main-navigation\_\_nav .nav--mobile .abper-112-toggle {
     display: none;
     }
    }
    .ek-global-navigation .menu--opened .abper-112-toggle+div,
    .main-navigation\_\_nav .nav--mobile .abper-112-toggle+div {
     display: block;
    }
    .main-navigation\_\_nav .nav--mobile .abper-112-toggle-container {
     padding: 15px;
    }
    .abper-112-hidden-mobile {
     display: none !important;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-hidden-mobile {
     display: inline-block !important;
     }
    }
    .abper-112-hidden-desktop {
     display: inline-block !important;
    }
    @media screen and (min-width: 1024px) {
     .abper-112-hidden-desktop {
     display: none !important;
     }
    }
    
    ### JavaScript
    
    insertHTMLAfter('body');
    
    /\* Get all elements required \*/
    var bxMobileWebFeedbackButton = document.getElementById('bx-mobile\_web\_feedback\_button');
    var bxModal = document.getElementById('bx-modal\_overlay');
    var bxFeedback = document.getElementById('bx-feedback\_option');
    var bxOptions = document.getElementById('bx-options');
    var bxRating = document.getElementById('bx-rating');
    var bxModalClose = bxModal.querySelector('.bx-modal\_\_btn-close-icon');
    var bxRatingButtons = document.getElementById('bx-rating\_buttons');
    var bxComment = document.getElementById('bx-comment');
    var bxCommentTextarea = document.getElementById('bx-comment\_textarea');
    var bxSubmitFeedback = document.getElementById('bx-submit\_feedback');
    var bxThankYou = document.getElementById('bx-thank\_you');
    var bxCloseButton = document.getElementById('bx-close');
    var bxModalOverlay = document.getElementById('bx-modal\_overlay');
    var ratingValue = 0;
    
    function closeModal() {
     bxThankYou.style.display = 'none';
     bxComment.style.display = 'none';
     bxRating.style.display = 'none';
     bxOptions.style.display = 'flex';
     bxModal.style.display = 'none';
     if (document.querySelector(".rating > input:checked")) {
     document.querySelector(".rating > input:checked").checked = false;
     bxCommentTextarea.value = "";
     }
    }
    
    function getPos() {
     var re = new RegExp('sitecore.com\\/a-z{2}\\/');
     var matches = re.exec(window.location.href);
     if (matches && matches.length > 0)
     return matches0.substring(0, matches0.length - 1);
     else
     return "sitecore.com";
    }
    
    bxModal.style.display = 'flex';
    
    bxFeedback.onclick = function() {
     bxOptions.style.display = 'none';
     bxRating.style.display = 'block';
    };
    
    function getRadioValue() {
     var stars = document.getElementsByName('rating');
     for(i = 0; i < stars.length; i++) {
     if(starsi.checked)
     return starsi.value;
     }
    }
    
    bxRatingButtons.onclick = function() {
     ratingValue = getRadioValue();
     if (ratingValue) {
     bxRating.style.display = 'none';
     bxComment.style.display = 'block';
     }
    };
    
    bxSubmitFeedback.onclick = function() {
     console.log("Submit feedback clicked");
     var feedbackEvent = {
     "channel": "WEB",
     "type": "FEEDBACK",
     "language": "EN",
     "currency": "EUR",
     "page": "home",
     "pos": getPos(),
     "browser\_id": Boxever.getID(),
     "rating": ratingValue,
     "comment": document.getElementById('bx-comment\_textarea').value,
     "survey\_id": "150174",
     "question\_text": document.getElementById('bx-header\_question').textContent,
     "page\_category": "",
     "visitor\_session\_id": "",
     "platform\_type": "",
     "country\_region": "",
     "member\_tier": "",
     "page\_url": window.location.href
     };
     console.log("Feedback event:", feedbackEvent);
     Boxever.eventCreate(feedbackEvent, function (data) {
     console.log("Feedback event sent:", data);
     // Only toggle visibility after the feedback event is processed
     bxThankYou.style.display = 'block';
     bxComment.style.display = 'none';
     }, 'json');
    };
    
    bxModalClose.onclick = function() {
     closeModal();
    };
    
    bxCloseButton.onclick = function() {
     closeModal();
    };
    
    var pos = getPos();
    document.getElementById('bx-contact\_link').setAttribute("href", ("https://www." + pos + "/company/contact-us") );
    document.getElementById('bx-complaint\_link').setAttribute("href", ("https://www." + pos + "/resources/support") );
    document.getElementById('bx-faq\_link').setAttribute("href", ("https://www." + pos + "/resources/support") );
    document.getElementById('bx-contact\_link2').setAttribute("href", ("https://www." + pos + "/company/contact-us") );
    
    /\* Add feedback to card on Help page \*/
    if (document.querySelector('ul.help-centre-feedback\_\_cards-container > li data-link="Complaints and feedback:Website feedback"')) {
     var helpFeedbackCard = document.querySelector('ul.help-centre-feedback\_\_cards-container > li data-link="Complaints and feedback:Website feedback"');
     helpFeedbackCard.onclick = function() {
     bxOptions.style.display = 'none';
     bxRating.style.display = 'block';
     bxModal.classList.remove("bx-hidden\_important");
     bxModal.style.display = 'flex';
     };
    }
    

## フィードバックイベントをフォーマットし送信する

顧客フィードバックをSitecore Personalizeの[Voice of the Customer dashboard](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/voice-of-customer-dashboard.html "Voice of Customer dashboard")に表示させるためには、ストリームFEEDBACKイベントをカスタムイベントとしてフォーマットし、データをキャプチャするために送信する必要があります。

フィードバックイベントをフォーマットし送信するには:

1.  以下の必要な属性を持つカスタムイベントをSendします:
    
    -   "channel" - イベントが送信されたチャネル。可能な値は、 "WEB"、 "MOBILE\_WEB"、または "MOBILE\_APP"。
    -   "type" - イベントの種類はフィードバックイベントを表すために "FEEDBACK" に設定されなければなりません。
    -   "question\_text" - 顧客に対して「 *ウェブサイト体験にどれくらい満足していますか?*」と尋ねる具体的な質問。
    -   "rating" - 1 から 5までの数値回答。 1 は最低得点、 5は最高得点を表します。
    -   "comment" - 顧客からのフリーテキストの回答で、体験に関する書面によるフィードバックを含むことができます。
    -   "execution\_ref" - フロー実行のための一意な参照。
    -   "pos" - 例えば、テナント向けに設定された販売時点(POS) *retailsite.com*。
    -   "browser\_id" - Sitecore Personalizeによって生成されたブラウザの一意ID。
    
    以下はJSON形式のFEEDBACKイベントの例です:
    
    {
     "channel":"WEB",
     "type":"FEEDBACK",
     "question\_text":"How satisfied were you with your website experience?",
     "rating":5,
     "comment":"Fantastic customer service when I needed to change my order",
     "execution\_ref":"ec5b12fc-f70b-4bcc-950e-338bbf41c66e",
     "pos":"retailsite.com",
     "browser\_id":"22860bff-94ba-4d84-aa37-2b5a83d5411b"
    }
    
2.  オプションとして、FEEDBACKイベントを送信した後、[Voice of the Customerダッシュボード](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/voice-of-customer-dashboard.html "Voice of Customer dashboard")で詳細を確認できます。このダッシュボードは顧客フィードバックを集約し、FEEDBACKイベントに含まれる属性に基づいて主要な指標を追跡できます。
    
    -   rating値は[平均評価タイルとNPS評価](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/voice-of-customer-dashboard.html#UUID-42fe499f-1513-1a83-9cc9-6912f36f6039_section-idm4575404112161633018007929265 "Ratings and responders")タイルに表示される評価を計算するために使われます。
    -   comment属性にキャプチャされたテキストは、十分な数の顧客が同様のフィードバックをくだされば、ダッシュボードの[ワードクラウド](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/view-dashboards/voice-of-customer-dashboard/voice-of-customer-dashboard.html#UUID-42fe499f-1513-1a83-9cc9-6912f36f6039_section-idm1703410819175430 "Word clouds")に表示されます。