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

最終更新日:

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

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

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

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

inspect-example.png

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

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

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

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

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

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

accordion.png

コードブロックにアクセスし、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>

HTML.png

注:この例では、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;
}

CSS.png

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.png

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

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

confetti.gif

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

    adjust_confetti_colors.png
// 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をボタンに追加する

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

  1. コードブロックにアクセスし、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>
  2. <https://www.yourwebsitehere.com>の部分にウェブアドレスを入力します。
  3. <https://content.pendo-internal.pendo.io/0QEQAhTvp96TaSrW-2qUpHK1Oyo/guide-media-16538ebc-822c-4396-ac06-27fa41017b2c>の部分にカスタム画像のURLを入力します。

    custom_image.png

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

  1. 新しいビルディングブロックを追加し、[画像(Image)]を選択して、お使いのパソコンから画像をアップロードします。

    building_block.png
  2. その画像のURLをコピーし、カスタムコードブロックに貼り付けます。

    image_url.png

ボタンのスタイル設定

ボタンのホバー時のサイズとスタイルを調整するには、コードブロックの[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);
}
style_button.png

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

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

  1. 新しいガイドを作成するか、既存のガイドを編集します。
  2. ビルディングブロックを追加し、[ボタン(Button)]を選択します。
  3. ボタンアクションとして[ガイドを起動(Launch Guide)]を選択します。

    注:ガイドを選択する必要はないため、ガイドの選択欄は空白のままにすることも可能です。



    launch_rc_button.png

  4. ユーザーの誘導先を決定し、対象のガイドIDをコピーします。
    • リソースセンターのホームビュー:以下の画像を参考にガイドIDを見つけます。

      RChomeview_guideid.png

    • リソースセンターの特定のモジュール:以下の画像を参考にガイドIDを見つけます。

      RCmodule_guideid.png
  5. リソースセンターの起動に使用するボタンIDを見つけるには、ガイド内のボタンにタグ付けするの記事の指示に従います。もしくは、Pendo Tagging Aidを使用してボタンIDを見つけることもできます。
  6. コードブロックにアクセスし、[コードを編集(Edit Code)]ウィンドウの[Javascript]タブに以下のコードスニペットを追加し、ガイドIDとボタンIDを挿入します。
pendo.dom('#pendo-button-{someLongID}').on('click', () => 

    {pendo.onGuideDismissed();

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

});

RCbuttonaction_codeblock.png

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

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

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

smiley_face.png

要件

ガイドステップには、少なくとも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)]タブより変更できます。

edit_number_scale.png

 

指標

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

poll_metrics.png

 

この記事は役に立ちましたか?
46人中13人がこの記事が役に立ったと言っています