コードでガイドをカスタマイズする

最終更新日: 2023年09月15日 02:11

ビジュアルデザインスタジオ（Visual Design Studio）は、技術者以外のユーザーにも使いやすいように作られていますが、技術者はコードブロックを使用することで、ガイドで追加のカスタマイズオプションを利用できます。この記事では、ガイドをさまざまな方法でカスタマイズできるカスタムコードスニペットを紹介します。

警告：この記事にあるカスタムコードスニペットは、Pendoプロダクトの機能を拡張することを目的としたものです。すべてのスニペットは無料でご利用いただけますが、保証、SLA、サポートはありません。カスタムコードはPendoサポートチームの業務および責任の対象外となるため、これらのスニペットに関するサポートチームへのお問い合わせはご遠慮ください。新しいスニペットの作成や、既存のスニペットの機能の変更/カスタマイズに関するリクエストは、調査目的でPendoのプロフェッショナルサービス（services@pendo.io）に転送されます。なお、このリクエストを完了するには、カスタムサービス契約が必要になります。

ビルディングブロックのクラスを見つける

それぞれのビルディングブロックにはIDが割り当てられています。現在、ブラウザの検証機能で、カスタムコード内で使用するクラスを見つけることができます。たとえば、Chromeユーザーがガイドのプレビューで要素を右クリックして検証を行うと、以下のような表示になります。

この検証例ではp#pendo-text-521f03a1...の中のpがクラスを示し、#pendo-text-521f03a1が一意のIDを示しています。

CSSセレクターについて詳しくは、こちらのW3の記事を参照してください。

コードブロックにアクセスする

新しいガイドを作成するか、既存のガイドを編集します。
ビルディングブロックを追加し、［詳細設定（Advanced）］セクションの［コードブロック（Code Block）］まで下にスクロールします。ビルディングブロックの追加方法については、ビルディングブロックを使用してガイドコンテンツを追加するを参照してください。
該当するタブにコードを追加し、［完了（Done）］を選択します。

ガイドコンテンツにアコーディオンドロップダウンを追加する

ガイドコンテンツにアコーディオンドロップダウンを追加できます。

コードブロックにアクセスし、HTML、CSS、JavaScript用の以下の3つのコードスニペットを［コードを編集（Edit Code）］ウィンドウのそれぞれのタブに追加します。

HTMLタブ

 <div class="accordion">
<!-- Dropdown 5 -->
<!--
<div class="a-container">
<p class="a-btn">Accordion dropdown code<span></span></p>
<div class="a-panel">
</div>
</div>
-->
<!-- Dropdown 1 -->
<div class="a-container">
<p class="a-btn">Your text goes here.<span ></span></p>
<div class="a-panel">
<script src="Media file goes here" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_zi5ms8ast1 videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/zi5ms8ast1/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
</div>
</div>
<!-- Dropdown 2 -->
<div class="a-container">
<p class="a-btn">Your text goes here.<span></span></p>
<div class="a-panel"> 
<script src="Media file goes here" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_wzh5bzwg5x videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/wzh5bzwg5x/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
</div>
</div>
<!-- Dropdown 3 -->
<div class="a-container">
<p class="a-btn">Your text goes here.<span></span></p>
<div class="a-panel">
<script src="Media file goes here" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_1btllcsz0d videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/1btllcsz0d/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
</div>
</div>
<!-- Dropdown 4 -->
<div class="a-container">
<p class="a-btn">Your text goes here.<span></span></p>
<div class="a-panel">
<script src="Media file goes here" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_nzwd88uvl9 videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/nzwd88uvl9/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
</div>
</div>

注：この例では、Wistiaメディアファイルを使用しています。アコーディオンドロップダウン内では任意のメディアファイルを使用できます。

CSSタブ

/* Panel style */
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
/* Panel style when active */
.accordion .a-container.active .a-panel {
padding: 10px 0;
opacity: 1;
height: auto;
max-height: 500px;
}
.a-btn {
cursor: pointer!important;
font-weight: 700;
}
.a-container {
padding: 14px 0 4px;
border-bottom: 1px #EFEEF2 solid;
}
.a-btn::after {
background-image: url("https://www.pendo.io/wp-content/themes/pendo-components/assets/images/pendo/components/chevron-down-icon@2x.png");
background-size: contain;
background-repeat: no-repeat;
display: inline;
position: absolute;
white-space: pre;
content: "\00a0";
width: 10px;
margin-top: 7px;
right: 40px;
}
#pendo-row-90251c5c, #pendo-text-7fe456a2 { display: none !important }
.pill-button {
background-color: #fff;
border: none;
color: #128397;
padding: 8px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 2px 4px;
cursor: pointer;
border-radius: 16px;
border: 1px #128397 solid;
font-weight: 400;
}
.pill-checkbox:checked + label {
background-color: #128397;
color: #fff;
}
input[type="checkbox"] {
display: none;
}

Javascriptタブ

function initAcc(elem, option){
if (!pendo.isAccordionEventListenerAdded == true) {
//addEventListener on mouse click
document.addEventListener('click', function (e) {
//check is the right element clicked
if (!e.target.matches(elem+' .a-btn')) return;
else{
//check if element contains active class
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
//if option true remove active class from all other accordions 
var elementList = document.querySelectorAll(elem +' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
} 
//add active class on cliked accordion 
e.target.parentElement.classList.add('active');
}else{
//remove active class on cliked accordion 
e.target.parentElement.classList.remove('active');
}
}
});
}
pendo.isAccordionEventListenerAdded = true;
}

//activate accordion function
initAcc('.accordion', true);

ガイドに紙吹雪を追加する

ガイドに紙吹雪を加えると、大規模なアップデートや新機能の追加など、嬉しいお知らせを華やかに演出できます。

コードブロックにアクセスし、以下のコードスニペットを［コードを編集］ウィンドウの［Javascript］タブに追加します。
紙吹雪の色を調整したい場合は、自社のブランディングに適したRGBコードを見つけて、以下のようにこのセクションのコードを更新します。

// https://github.com/mathusummut/confetti.js

const confetti = {

    maxCount: 150, // set max confetti count

    speed: 2, // set the particle animation speed

    frameInterval: 15, // the confetti animation frame interval in milliseconds

    alpha: 1.0, // the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)

    gradient: false, // whether to use gradients for the confetti particles

    start: null, // call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)

    stop: null, // call to stop adding confetti

    toggle: null, // call to start or stop the confetti animation depending on whether it's already running

    pause: null, // call to freeze confetti animation

    resume: null, // call to unfreeze confetti animation

    togglePause: null, // call to toggle whether the confetti animation is paused

    remove: null, // call to stop the confetti animation and remove all confetti immediately

    isPaused: null, // call and returns true or false depending on whether the confetti animation is paused

    isRunning: null // call and returns true or false depending on whether the animation is running

};

(function celebration() {

    confetti.start = startConfetti;

    confetti.stop = stopConfetti;

    confetti.toggle = toggleConfetti;

    confetti.pause = pauseConfetti;

    confetti.resume = resumeConfetti;

    confetti.togglePause = toggleConfettiPause;

    confetti.isPaused = isConfettiPaused;

    confetti.remove = removeConfetti;

    confetti.isRunning = isConfettiRunning;

    const supportsAnimationFrame =

        window.requestAnimationFrame ||

        window.webkitRequestAnimationFrame ||

        window.mozRequestAnimationFrame ||

        window.oRequestAnimationFrame ||

        window.msRequestAnimationFrame;

    const colors = ['rgba(217,252,255,', 'rgba(90,183,207,', 'rgba(18,130,151,'];

    let streamingConfetti = false;

    let animationTimer = null;

    let pause = false;

    let lastFrameTime = Date.now();

    let particles = [];

    let waveAngle = 0;

    let context = null;

    function resetParticle(particle, width, height) {

        particle.color = `${colors[(Math.random() * colors.length) | 0]}${confetti.alpha})`;

        particle.color2 = `${colors[(Math.random() * colors.length) | 0]}${confetti.alpha})`;

        particle.x = Math.random() * width;

        particle.y = Math.random() * height - height;

        particle.diameter = Math.random() * 10 + 5;

        particle.tilt = Math.random() * 10 - 10;

        particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;

        particle.tiltAngle = Math.random() * Math.PI;

        return particle;

    }

    function toggleConfettiPause() {

        if (pause) resumeConfetti();

        else pauseConfetti();

    }

    function isConfettiPaused() {

        return pause;

    }

    function pauseConfetti() {

        pause = true;

    }

    function resumeConfetti() {

        pause = false;

        runAnimation();

    }

    function runAnimation() {

        if (pause) return;

        if (particles.length === 0) {

            context.clearRect(0, 0, window.innerWidth, window.innerHeight);

            animationTimer = null;

        } else {

            const now = Date.now();

            const delta = now - lastFrameTime;

            if (!supportsAnimationFrame || delta > confetti.frameInterval) {

                context.clearRect(0, 0, window.innerWidth, window.innerHeight);

                updateParticles();

                drawParticles(context);

                lastFrameTime = now - (delta % confetti.frameInterval);

            }

            animationTimer = requestAnimationFrame(runAnimation);

        }

    }

    function startConfetti(timeout, min, max) {

        const width = window.innerWidth;

        const height = window.innerHeight;

        window.requestAnimationFrame = (function() {

            return (

                window.requestAnimationFrame ||

                window.webkitRequestAnimationFrame ||

                window.mozRequestAnimationFrame ||

                window.oRequestAnimationFrame ||

                window.msRequestAnimationFrame ||

                function(callback) {

                    return window.setTimeout(callback, confetti.frameInterval);

                }

            );

        })();

        let canvas = document.getElementById('confetti-canvas');

        if (canvas === null) {

            canvas = document.createElement('canvas');

            canvas.setAttribute('id', 'confetti-canvas');

            canvas.setAttribute('style', 'display:block;z-index:999999;pointer-events:none;position:fixed;top:0');

            document.body.prepend(canvas);

            canvas.width = width;

            canvas.height = height;

            window.addEventListener(

                'resize',

                function() {

                    canvas.width = window.innerWidth;

                    canvas.height = window.innerHeight;

                },

                true

            );

            context = canvas.getContext('2d');

        } else if (context === null) context = canvas.getContext('2d');

        let count = confetti.maxCount;

        if (min) {

            if (max) {

                if (min == max) count = particles.length + max;

                else {

                    if (min > max) {

                        const temp = min;

                        min = max;

                        max = temp;

                    }

                    count = particles.length + ((Math.random() * (max - min) + min) | 0);

                }

            } else count = particles.length + min;

        } else if (max) count = particles.length + max;

        while (particles.length < count) particles.push(resetParticle({}, width, height));

        streamingConfetti = true;

        pause = false;

        runAnimation();

        if (timeout) {

            window.setTimeout(stopConfetti, timeout);

        }

    }

    function stopConfetti() {

        streamingConfetti = false;

    }

    function removeConfetti() {

        stop();

        pause = false;

        particles = [];

    }

    function toggleConfetti() {

        if (streamingConfetti) stopConfetti();

        else startConfetti();

    }

    function isConfettiRunning() {

        return streamingConfetti;

    }

    function drawParticles(context) {

        let particle;

        let x;

        let y;

        let x2;

        let y2;

        for (let i = 0; i < particles.length; i++) {

            particle = particles[i];

            context.beginPath();

            context.lineWidth = particle.diameter;

            x2 = particle.x + particle.tilt;

            x = x2 + particle.diameter / 2;

            y2 = particle.y + particle.tilt + particle.diameter / 2;

            if (confetti.gradient) {

                const gradient = context.createLinearGradient(x, particle.y, x2, y2);

                gradient.addColorStop('0', particle.color);

                gradient.addColorStop('1.0', particle.color2);

                context.strokeStyle = gradient;

            } else context.strokeStyle = particle.color;

            context.moveTo(x, particle.y);

            context.lineTo(x2, y2);

            context.stroke();

        }

    }

    function updateParticles() {

        const width = window.innerWidth;

        const height = window.innerHeight;

        let particle;

        waveAngle += 0.01;

        for (let i = 0; i < particles.length; i++) {

            particle = particles[i];

            if (!streamingConfetti && particle.y < -15) particle.y = height + 100;

            else {

                particle.tiltAngle += particle.tiltAngleIncrement;

                particle.x += Math.sin(waveAngle) - 0.5;

                particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;

                particle.tilt = Math.sin(particle.tiltAngle) * 15;

            }

            if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {

                if (streamingConfetti && particles.length <= confetti.maxCount) resetParticle(particle, width, height);

                else {

                    particles.splice(i, 1);

                    i--;

                }

            }

        }

    }

})();

(function () {

    let confettiShown = false;

    if (document.hidden) {

      document.addEventListener('visibilitychange', () => {

        if (!document.hidden && !confettiShown) {

          confetti.start(3000); 

          confettiShown = true

        }

      });

    } else {

       confetti.start(3000);  

      confettiShown = true;

    }

})();

カスタム画像のURLをボタンに追加する

ウェブアドレスにリンクするカスタム画像ボタンを作成するには、以下の手順を実行します。

コードブロックにアクセスし、HTMLタブに以下のコードを追加します。

<div>
<a href="https://www.yourwebsitehere.com"><img src="https://content.pendo-internal.pendo.io/0QEQAhTvp96TaSrW-2qUpHK1Oyo/guide-media-16538ebc-822c-4396-ac06-27fa41017b2c"></a>.
</div>

<https://www.yourwebsitehere.com>の部分にウェブアドレスを入力します。
<https://content.pendo-internal.pendo.io/0QEQAhTvp96TaSrW-2qUpHK1Oyo/guide-media-16538ebc-822c-4396-ac06-27fa41017b2c>の部分にカスタム画像のURLを入力します。

画像のURLがない場合は、以下の手順を実行します。

新しいビルディングブロックを追加し、［画像（Image）］を選択して、お使いのパソコンから画像をアップロードします。
その画像のURLをコピーし、カスタムコードブロックに貼り付けます。

ボタンのスタイル設定

ボタンのホバー時のサイズとスタイルを調整するには、コードブロックの［CSS］タブに以下のコードを追加します。

/*Link tiles styling END*/


.footer {
padding: 10px;

}

/*Styling for the Link Images*/
div{
width: 100%
}

.image-link{


margin-top: 4%;
margin-bottom: 0%;
margin-left: 0%;
margin-right: 10%;
width: 100%;
border: 1px #DADCE5;
border-style: solid;
font-weight: 600;
cursor: pointer;
border-radius: 6px;
}

.image-link:Hover {
box-shadow: 0px 2px 6px rgba(0, 0, 0, .2);
}

ガイドからリソースセンターを起動する

ボタンアクションを使用すると、ガイドから直接リソースセンターを起動し、すべてのリソースにすばやくアクセスできます。これを行うには、コードブロックに追加するボタンIDとガイドIDが必要です。

新しいガイドを作成するか、既存のガイドを編集します。
ビルディングブロックを追加し、［ボタン（Button）］を選択します。
ボタンアクションとして［ガイドを起動（Launch Guide）］を選択します。

注：ガイドを選択する必要はないため、ガイドの選択欄は空白のままにすることも可能です。
ユーザーの誘導先を決定し、対象のガイドIDをコピーします。
- リソースセンターのホームビュー：以下の画像を参考にガイドIDを見つけます。
- リソースセンターの特定のモジュール：以下の画像を参考にガイドIDを見つけます。
リソースセンターの起動に使用するボタンIDを見つけるには、ガイド内のボタンにタグ付けするの記事の指示に従います。もしくは、Pendo Tagging Aidを使用してボタンIDを見つけることもできます。
コードブロックにアクセスし、［コードを編集（Edit Code）］ウィンドウの［Javascript］タブに以下のコードスニペットを追加し、ガイドIDとボタンIDを挿入します。

pendo.dom('#pendo-button-{someLongID}').on('click', () => 

    {pendo.onGuideDismissed();

    pendo.showGuideById('guide-ID-here');

});

ガイドに顔文字による投票とアンケート調査を追加する

ガイドにカスタムコードを追加して、アクティブなガイドステップ内のすべての数字による投票とアンケート調査を「顔文字」のセットに変更することができます。

注：このコードは、数字による投票とアンケート調査にのみ適用され、Pendoガイドの他の投票とアンケート調査のタイプには影響しません。

要件

ガイドステップには、少なくとも1つの数字による投票とアンケート調査（1～5の数字から成る5段階の選択肢のある調査）が含まれている必要があります。

ヒント：Pendoプロフェッショナルサービスと連携して、5つ以上または5つ未満の顔文字から成る投票とアンケート調査を作成することができます。

カスタムコードを追加する

コードブロックにアクセスし、以下のコードスニペットを［コードを編集］ウィンドウの［CSS］タブに追加します。

/* Smiley Faces Source URLs */
@grey-face-1: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-76639afa-09bc-4226-a7b8-6c473d27b3fb');
@grey-face-2: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-c455ccff-6850-41db-9a02-7b44de37f4b2');
@grey-face-3: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-633f5928-a9f4-44ca-9d2b-5a2321b53100');
@grey-face-4: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-aa503f85-9e18-4020-b490-cdd88c3186c7');
@grey-face-5: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-5b91a381-c52a-451e-afc7-8b978af1cd54');

@color-face-1: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-e141cc7d-8d5d-483b-addf-fa995db76a74');
@color-face-2: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-bdeb7bde-392d-42c4-bee4-6b1b2e038d5e');
@color-face-3: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-73f3f214-f9a2-4045-a338-1d711a73d5c9');
@color-face-4: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-1402fa1c-ef86-4d22-8f81-cb2517c7b144');
@color-face-5: url('https://pendo-static-5926218839621632.storage.googleapis.com/RfG4pvMVSdCfUAR6XkWNvI7QKCo/guide-media-cc7ac2fb-3a60-4c58-9ef5-d29e5d0c58db');

/* Base Sizing & Color Styles */

label.pendo-radio[class*="_pendo-number-scale-poll-"] {
background-repeat: no-repeat;
background-size: contain;
color: rgba(0, 0, 0, 0.0)!important; 
&:hover {
background-repeat: no-repeat!important;;
background-size: contain!important;;
color: rgba(0, 0, 0, 0.0)!important; 
}
}

/* Default Faces State */

._pendo-number-scale-poll-1 { background-image: @grey-face-1; }
._pendo-number-scale-poll-2 { background-image: @grey-face-2; }
._pendo-number-scale-poll-3 { background-image: @grey-face-3; }
._pendo-number-scale-poll-4 { background-image: @grey-face-4; }
._pendo-number-scale-poll-5 { background-image: @grey-face-5; }

/* Hover Faces State */

label.pendo-radio._pendo-number-scale-poll-1:hover { background-image: @color-face-1!important; }
label.pendo-radio._pendo-number-scale-poll-2:hover { background-image: @color-face-2!important; }
label.pendo-radio._pendo-number-scale-poll-3:hover { background-image: @color-face-3!important; }
label.pendo-radio._pendo-number-scale-poll-4:hover { background-image: @color-face-4!important; }
label.pendo-radio._pendo-number-scale-poll-5:hover { background-image: @color-face-5!important; }

/* Active States for Faces */

input[type="radio"]._pendo-number-scale-poll-1-input:checked + label{
background-image: @color-face-1!important;
background-repeat: no-repeat!important;
background-size: contain!important;
background-color: #ffffff!important;
color: rgba(0, 0, 0, 0.0)!important; 
}

input[type="radio"]._pendo-number-scale-poll-2-input:checked + label{
background-image: @color-face-2!important;
background-repeat: no-repeat!important;
background-size: contain!important;
background-color: #ffffff!important;
color: rgba(0, 0, 0, 0.0)!important; 
}

input[type="radio"]._pendo-number-scale-poll-3-input:checked + label{
background-image: @color-face-3!important;
background-repeat: no-repeat!important;
background-size: contain!important;
background-color: #ffffff!important;
color: rgba(0, 0, 0, 0.0)!important; 
}

input[type="radio"]._pendo-number-scale-poll-4-input:checked + label{
background-image: @color-face-4!important;
background-repeat: no-repeat!important;
background-size: contain!important;
background-color: #ffffff!important;
color: rgba(0, 0, 0, 0.0)!important; 
}

input[type="radio"]._pendo-number-scale-poll-5-input:checked + label{
background-image: @color-face-5!important;
background-repeat: no-repeat!important;
background-size: contain!important;
background-color: #ffffff!important;
color: rgba(0, 0, 0, 0.0)!important; 
}

投票とアンケート調査を変更する

パディング、余白、顔文字の背景色など、投票とアンケート調査の特定の属性は、ビジュアルデザインスタジオ（Visual Design Studio）の標準機能を使用して変更できます。たとえば、透明な顔文字の背景色を白にしたい場合は、［数字による投票とアンケート調査（Number Scale Poll）］ビルディングブロックの［スタイル設定（Styling）］タブより変更できます。

指標

投票とアンケート調査によって提供される指標は、標準的な数字による投票とアンケート調査の指標と同様、「1」が最も低い評価、「5」が最も高い評価となります。

Calendlyを使用して予約率を高める

顧客とのさらなる関わりを求められる役割を担う場合は、Pendoと併せてCalendlyを使用して、アプリ内メッセージ機能を活かして顧客の予約率を上げることができます。

そのメリットは以下のとおりです。

予約率を上げる
行動データを使用して、予約メッセージ送信のターゲティング精度を上げる

注：このフィーチャーは、ウェブアプリ内のガイドにのみ適用されます。モバイルアプリのガイドには適用されません。

要件

ガイダンス付きのPendoアカウント
有効なCalendlyアカウント

スケジュールされた予定をガイドに追加する

Calendlyアカウントにログインして、新しいイベントタイプを作成するか、既存のイベントを検索します。
ガイドに埋め込みたいイベントで、［共有（Share）］を選択します。
［ウェブサイトに追加（Add to Website）］に移動し、［インライン埋め込み（Embed inline）］を選択して［続行（Continue）］を選択します。
予約ページの設定を調整し、［コードをコピー（Copy Code）］を選択します。
Pendoにログインしてガイドを作成します。話し合いのスケジューリングの目的を説明するステップ1と、Calendlyのカレンダーを表示するステップ2を含む、マルチステップガイドを作成することをお勧めします。
Calendlyからコピーしたスニペットを［HTML］タブにペーストして、コードブロックを追加します。次に、ガイドを保存して公開します。
ガイドをプレビューして試してみてください。