home

How to implement the testemonal script for AMP

This script uses the following AMP plugins, import them in your head, below the main amp script if your site doesn't already use them

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

if you want to use the provided CSS, put this css in your AMP custom style tag at the head of the page

.ts{color:#333}.ts-headline{text-align:left;font-weight:normal;font-size:18px;height:30px;line-height:30px}.ts-subheadline{font-size:14px;color:#666;text-align:left}.ts-subheadline-right{text-align:right}.ts-heading{display:flex;justify-content:space-between;align-items:center}.ts-statwrapper{display:flex;justify-content:flex-end;align-items:flex-end;flex-direction:column;margin-left:10px}.ts-stars{position:relative;width:125px;height:30px;transform:translateX(2px)}.ts-emptystars,.ts-fullstars{position:absolute;top:0;left:0;height:30px}.ts-emptystar,.ts-fullstar{width:25px;height:30px;font-size:30px;line-height:30px;display:block;float:left}.ts-fullstars>div,.ts-slide-fullstar>div{overflow:hidden;white-space:nowrap;display:flex}.ts-fullstar,.ts-slide-fullstar{color:orange}.ts-slide-stars{display:flex;justify-content:center}.ts-slide-emptystar,.ts-slide-fullstar{width:20px;height:30px;font-size:22px;line-height:30px;display:block;float:left}.ts-testimonialscount{font-size:18px;line-height:30px;margin-left:5px}.ts-slider{position:relative}.ts-slide{position:relative;width:100%}.ts-slide-title{font-size:22px;font-weight:bold;margin-bottom:5px}.ts-slide-text{margin-bottom:10px}.ts-slide-inner{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%}.ts-slide-writer{font-weight:bold}.ts-slide.ts-active{opacity:1}.amp-mode-mouse .amp-carousel-button,amp-carousel[controls] .amp-carousel-button{opacity:0;transition:.4s ease-in-out opacity;cursor:pointer}amp-carousel:hover .amp-carousel-button{opacity:1}

Put this amphtml on your page where you want your slider

<amp-list height="396" width="400" layout="fixed" single-item items="." src="full link to your api key" class="ts">
        <template type="amp-mustache">
            <div class="ts-heading">
                <div class="ts-headline-wrapper">
                    {{#companyName}}
                    <p class="ts-headline">{{.}}</p>
                    {{/companyName}}
                    {{#testimonialsCount}}
                    <p class="ts-subheadline"> {{.}} anmeldelser</p>
                    {{/testimonialsCount}}
                </div>
                <div class="ts-statwrapper">
                    <div class="ts-stars">
                        <div class="ts-emptystars">
                            <span class="ts-emptystar">★</span>
                            <span class="ts-emptystar">★</span>
                            <span class="ts-emptystar">★</span>
                            <span class="ts-emptystar">★</span>
                            <span class="ts-emptystar">★</span>
                        </div>
                        {{#averageRating}}
                        <amp-layout class="ts-fullstars" width="125" [width]="{{.}} * 25" height="30" layout="fixed">
                            <span class="ts-fullstar">★</span>
                            <span class="ts-fullstar">★</span>
                            <span class="ts-fullstar">★</span>
                            <span class="ts-fullstar">★</span>
                            <span class="ts-fullstar">★</span>
                        </amp-layout>
                        {{/averageRating}}
                    </div>
                    {{#averageRating}}
                    <p class="ts-subheadline ts-subheadline-right">{{.}} stjerner i gennemsnit</p>
                    {{/averageRating}}
                </div>
            </div>
        <amp-carousel height="350px" width="400" layout="fixed" class="ts-slider" type="slides" autoplay delay="7000">
                {{#testimonials}}
                <div class="ts-slide">
                    <div class="ts-slide-inner">
                        <p class="ts-slide-title">{{title}}</p>
                        <p class="ts-slide-text">{{text}}</p>
                        {{#writer}}
                            {{#name}}
                            <p class="ts-slide-writer-name">{{.}}</p>
                            {{/name}}
                            {{#companyPosition}}
                            <p class="ts-slide-writer-position">{{.}}</p>
                            {{/companyPosition}}
                            {{#companyName}}
                            <p class="ts-slide-writer-company">{{.}}</p>
                            {{/companyName}}
                        {{/writer}}
                        <div class="ts-slide-stars">
                            <amp-layout class="ts-slide-stars" width="100" [width]="{{rating}} * 20" height="30" layout="fixed">
                                <span class="ts-slide-fullstar">★</span>
                                <span class="ts-slide-fullstar">★</span>
                                <span class="ts-slide-fullstar">★</span>
                                <span class="ts-slide-fullstar">★</span>
                                <span class="ts-slide-fullstar">★</span>
                            </amp-layout>
                            <amp-layout class="ts-slide-stars" width="100" [width]="100 - ({{rating}} * 20)" height="30" layout="fixed">
                                <span class="ts-slide-emptystar">★</span>
                                <span class="ts-slide-emptystar">★</span>
                                <span class="ts-slide-emptystar">★</span>
                                <span class="ts-slide-emptystar">★</span>
                                <span class="ts-slide-emptystar">★</span>
                            </amp-layout>
                        </div>
                    </div>
                </div>
                {{/testimonials}}
            </amp-carousel>
        </template>
    </amp-list>

editable attributes:

See example