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

最終更新日: 2024年05月07日 05:20

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

警告：この記事では、お客様にPendoのプロダクトを幅広く活用していただけるよう、例としてカスタムコードスニペットを使用しています。しかし、これらのスニペットに対する保証やSLA、サポートはありませんので、ご注意ください。すべてのスニペットは無料で使用できますが、カスタムコードはテクニカルサポートチームの責任の範囲外となります。新しいスニペットの作成や既存のスニペットの変更、機能のカスタマイズについてリクエストがある場合は、Pendoプロフェッショナルサービス（services@pendo.io）までご連絡ください。なお、これらのリクエストを遂行するには、Pendoとのカスタムサービス契約が必要になります。

注：ビジュアルデザインスタジオは、コードを記述している間、継続的にコードを再実行します。ES6準拠のコードを記述する場合は、constを使用するとコードが再実行されないことに注意してください。これは、constで宣言された変数が、後続の実行ですでに定義されているためです。これを回避するために、Pendoでは、JavaScriptをIIFEでラップするか、letまたはvarを使用することを推奨しています。

コードブロックを追加する

新しいガイドを作成するか、既存のガイドを編集します。
ビルディングブロックを追加し、［詳細設定（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を見つけることもできます。
コードブロックを追加し、［コードを編集］ウィンドウの［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」が最も高い評価となります。

ターゲット要素の上にカーソルを合わせたときにガイドを表示する

ターゲット要素の上にカーソルを合わせたときにガイドが表示されるようにコードを追加できます。

Guide hover code.gif

手順は次のとおりです。

要素をターゲットとするガイドを作成し、アクティベーション方法として［ターゲット要素（Target Element）］を選択します。

コードブロックを追加し、［Javascript］タブに以下のコードを追加します。

(function dismissGuideOnLeaveHover(dom) {
   function mouseoverHandler(e) {
     var tgt = e.target || e.srcElement;
     if (!dom(tgt).closest(step.elementPathRule).length) {
       pendo.onGuideDismissed();
       pendo.detachEvent(window, 'mouseover', mouseoverHandler);
     }
   }

pendo.attachEvent(window, 'mouseover', mouseoverHandler);

})(pendo.dom)

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

それぞれのビルディングブロックにはIDが割り当てられています。ブラウザの検証機能で、カスタムコード内で使用するクラスを見つけることができます。ガイドプレビュー内の要素を右クリックして［検証（Inspect）］を選択すると、ブラウザの開発者ツールが開き、固有のIDを含む要素のCSSセレクターが表示されます。

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