Invite Markup and Styling for Feedback Button

This code creates a Feedback button that will appear towards the lower-left corner of the web page, rotated at 90 degrees so it covers as little of the web page as possible.

Figure 1 - Example of a Feedback button

The button will be visible on every page in the website, and will remain visible after it has been clicked so the user can provide feedback multiple times.

Scenario

Copy the code below into the Scenario field. Note that you must change the invite, container and survey names as appropriate.

                var fn = function () {
    api()
        .invite('My feedback button')
        .container('My overlay')
        .survey('p1862987068')
        .show();
    };
setTimeout(fn, 1*1000);
              

Markup

Copy the code below into the Markup field:

                <div data-invite-persistent class="__container cf-prompt-container">
    <div class="cf-survey-prompt cf-survey-prompt--bottom-left">
        <button data-invite-accept class="cf-survey-prompt--accept">FEEDBACK</button>
    </div>
</div>
              

Styling

Copy the code below into the Styling field:

                .__container .cf-survey-prompt {
    box-sizing: border-box;
    transform: rotate(90deg) translateY(123px);
    transform-origin: left bottom;
}
.__container .cf-survey-prompt {
    position: fixed;
    z-index: 101;
    font: 14px Arial;
    background: rgb(246, 247, 248);
    border-radius: 2px;
}
.__container .cf-survey-prompt--title,
.__container .cf-survey-prompt--text,
.__container .cf-survey-prompt--buttons {
    padding: 10px 20px;
}
.__container .cf-survey-prompt--title {
    background: #ff7813;
    font-weight: bold;
    color: #fff;
}
.__container .cf-survey-prompt--accept:hover {
    color: rgb(230, 230, 230);
}
.__container .cf-survey-prompt--accept,
.__container .cf-survey-prompt--decline {
    -webkit-appearance: none;
    border: none;
    display: inline-block;
    border-radius: 2px;
    color: white;
    text-align: center;
    padding: 4px 23px;
    line-height: normal;
    height: 34px;
    cursor: pointer;
    font-family: helvetica, arial;
    font-size: 14px;
}
.__container .cf-survey-prompt--accept {
    background-color: #ff7813;
    border: 1px solid #ff7813;
}
.__container .cf-survey-prompt--decline {
    background-color: #ff7813;
    border-bottom: 1px solid #ff7813;
}
.__container .cf-survey-prompt--close {
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.__container .cf-survey-prompt--close circle {
    fill: #fff;
    stroke:#ff7813;
    stroke-width:2px;
    stroke-linecap: round;
}
.__container .cf-survey-prompt--close path {
    stroke-width:2px;
    stroke-linecap: round;
    fill:none;
    stroke: #ff7813;
}
.__container .cf-survey-prompt--bottom-left {
    left: 120px;
    top: 50%;
}
.__container .cf-survey-prompt--top-right {
    top: 20px;
    right: 20px;
}
.__container .cf-survey-prompt--top-left {
    top: 20px;
    left: 20px;
}
.__container .cf-survey-prompt--centered .cf-survey-prompt--close,
.__container .cf-survey-prompt--top-left .cf-survey-prompt--close,
.__container .cf-survey-prompt--bottom-left .cf-survey-prompt--close {
    left: auto;
    right: -30px;
}
.__container .cf-survey-prompt--top-right .cf-survey-prompt--close,
.__container .cf-survey-prompt--bottom-right .cf-survey-prompt--close {
    left: -30px;
    right: auto;
}
.__container .cf-survey-prompt--centered {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 305px;
    height: 130px;
    margin: auto;
}