Демонстрация системы сбора отзывов

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Система сбора отзывов с авторизацией через социальные сети и сбором отзывов с Follow up рассылки"/> <title>Демонстрация системы сбора отзывов - Cackle</title> <link rel="shortcut icon" href="/static/img/favicon.ico" />  <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" /> <link href="/static/css/core-min.css?v=e5efa" rel="stylesheet" /> </head> <body> <div class="navbar navbar-default navbar-static-top main-menu"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand logo" href="/">CACKLE</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li ><a href="/about">О компаниии</a></li> <li><a href="http://blog.cackle.me" target="_blank">Блог</a></li> <li ><a href="/pricing">Тарифы</a></li> <li ><a href="/account/signin">Вход</a></li> </ul> </div> </div> </div> <div id="demo"><div class="container text-center"> <ul class="nav nav-tabs nav-justified"> <li class="active"> <a href="javascript:void(0)"> Отзывы </a> </li> <li > <a href="/demo/comments"> Комментарии </a> </li> <li > <a href="/demo/chat"> Онлайн консультант </a> </li> <li > <a href="/demo/polls"> Опросы </a> </li> </ul> </div> </div> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-offset-1 col-md-10"> <div id="mc-control"> <style> .next { } #mc-control{ display:none; } #mc-review{ margin-top:15px; } .get-code{ margin-left:10px; } </style> <div> </div> <a style="cursor: pointer;" aria-disabled="true" class="next"> <span>сменить</span> <span>Дизайн →</span> </a> <a style="cursor: pointer;" aria-disabled="true" class="userpic"> <span>убрать</span> <span>аватар →</span> <div></div> </a> <a class="next get-code" href="#pre"> <span>css</span> <span>код дизайна →</span> <div></div> </a> </div> <div id="mc-review"></div> <script type="text/javascript"> var green = '#e3f8e7'; var css1 = ({featured,column,scorefirst,createfirst,starColor,bgColor,buttonColor})=>{ return ` .section { container-name: cackle; --featured: ${featured}; --column: ${column}; --scorefirst: ${scorefirst}; --createfirst: ${createfirst}; --main-bg-color:${bgColor}; --button-bg-color:${buttonColor}; --star-bg-color: ${starColor}; container-type: inline-size; } div[itemprop="review"] { container-name: user; --display: none; --column: ${column}; --scorefirst: ${scorefirst}; --createfirst: ${createfirst}; --main-bg-color:${bgColor}; --button-bg-color:${buttonColor}; --star-bg-color: ${starColor}; container-type: inline-size; } ` } var css3 = ({display})=>{ return ` div[itemprop="review"] { container-name: user; --display: ${display}; container-type: inline-size; } ` } var css2 = ` @container cackle style(--featured: true) { .section .container #mc-control{ display:flex !important; } .cr .review-cont{ display: flex; flex-direction: column; flex: 8; } .cr .mc-text-wrap{ margin-right: 1em !important; } .cr .mc-comment-replybox .mc-reply { margin-right: 1em !important; padding-left: 10px !important; padding-right: 10px !important; } .cr .mc-review-menu { top:0px !important; } .cr .mc-review-comment{ background: var(--main-bg-color) !important; font-family: inter-regular,Arial,sans-serif!important; letter-spacing: .005rem!important; margin-top: 2rem!important; padding-left: 1rem !important; border-radius: 10px!important; margin-left: calc(48px + 2rem + 1em) !important; } @container user style(--display: true){ .cr .mc-review-wrap .mc-review-comment { margin-left: calc(48px + 2rem + 1em) !important; } } @container user style(--display: false){ .cr .mc-reviews .mc-review-wrap, body .cr .mc-reviews .mc-review-wrap{ padding-left: 0px !important; } .mc-review-user{ display:none !important; } .cr .mc-review-comment{ margin-left: calc(1rem + 1em) !important; } } .cr .mc-comment-wrap { padding-bottom:0px !important; } .cr .mc-comment-replybox .mc-postbox { padding-top: 16px !important; } .cr .mc-comment-footer{ padding-bottom: 10px !important; } .cr .mc-breakdwn .mc-breakdwn-star svg path, .cr-form svg path { fill:var(--star-bg-color) !important; } body .cr-form .mc-btn2{ padding-left:10px !important; padding-right:10px !important; } .cr .mc-score .mc-star svg, body .cr .mc-score .mc-star svg { height: 2rem!important; width: 2rem!important; } .mc-review-head .mc-review-username{ flex: 7; min-width: initial !important; max-width: initial !important; } .cr img.svg-source { position: initial !important; height: auto !important; } .cr .mc-review-head { padding: 0px !important; } .cr .mc-review-time{ text-align: end !important; } .cr .mc-review-footer > a, .cr .mc-review-footer span, .cr .mc-comment-footer > a { color: #001a3499 !important; } .cr .mc-review-head .mc-review-time{ color: #001a3499 !important; flex: 2; } .cr .svg-container{ padding-left: 15px !important; } .cr .mc-star svg path, body .cr .mc-star svg path { fill: var(--star-bg-color)!important; } .cr .mc-breakdwn .mc-breakdwn-itm { margin: 0 0 3px !important; border:none !important; } .cr .mc-score .mc-breakdwn{ border: none !important; margin-bottom: 1.5rem !important; } .cr .mc-score .mc-btn2, .cr .mc-menu.mc-grid .mc-btn2, .cr .mc-comment-replybox .mc-reply, .cr-form .mc-user .mc-btn2 { background-color: var(--button-bg-color) !important; color: rgb(255, 255, 255) !important; border-radius: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .mc-reviews-pagination button.mc-btn2{ box-shadow: none !important; background: none !important; } .cr .review-div .review-cont .mc-reviews-pagination{ padding-top: 1rem !important; } .cr .mc-review-time, .cr .mc-comment-time { color: #b7bbc1 !important; font-size: 11px !important; /* vertical-align: text-bottom !important; */ margin-left: 12px !important; line-height: 22px !important; padding-top: 0px !important; } .cr .mc-review-head, body .cr .mc-review-head { justify-content: flex-start !important; } } @container cackle style(--column: false) { .cr .review-div{ display:flex; flex-direction:column; } .cr .review-div .mc-score{ padding: 2rem !important; } .cr .review-div .mc-grid { padding: 1rem !important; } .cr.mc-c > .mc-menu.mc-grid{ display: none !important; } .cr .mc-score .mc-breakdwn .mc-breakdwn-bar { width: auto !important; } body .cr .mc-score .mc-breakdwn{ align-items: stretch; flex: 8 !important; padding-right: 15px !important; margin-right: 15px !important; } .mc-formbtn .mc-btn2.mc-newreview svg{ display:none !important; } .mc-rate-schema .mc-star-text,.mc-rate-schema .mc-star-text .mc-rating{ padding:0 !important; margin:0 !important; } .cr .mc-rate{ flex: 2 !important; } .cr .mc-score{ display: flex !important; } } @container cackle (width < 700px) { .cr .review-div{ display:flex!important; } body .cr .review-div{ flex-direction:column !important; align-items: stretch !important; } @container cackle style(--column: false) { .cr .review-div .mc-score{ flex-direction: column; align-items: stretch; } .cr .review-div .mc-rate, .cr .review-div .mc-rate-stars{ display: flex; flex-direction: column; align-items: center; } } body .cr .review-div .mc-score { min-width:initial !important; max-width:initial !important; } body .cr .mc-review-vote { margin-left: 10px !important; } } @container cackle style(--column: true) { .cr .review-div .mc-grid, .review-div .mc-btn2.mc-newreview { display:none !important; } .cr .review-div{ display:flex; flex-direction:row-reverse !important; align-items: flex-start; column-gap: 20px; } .cr .mc-breakdwn .mc-breakdwn-star svg path { fill:var(--star-bg-color) !important; } .cr .mc-score{ display:flex; flex-direction: column; flex: 2; } .cr .mc-reviews, body .cr .mc-reviews { flex:8 } .cr .mc-reviews{ flex:2 } body .cr .mc-score { max-width: 200px !important; min-width: 200px !important; display: flex; flex-direction: column; flex: 2; } body .cr .mc-score .mc-rate { display: flex; flex-direction: column; } body .cr .mc-score .mc-rate .mc-rate-schema{ display:flex !important; } .cr .mc-score .mc-score, .cr .mc-score .mc-breakdwn, .cr .mc-score .mc-formbtn{ margin: 0 !important; float: none !important; padding: 0!important; } .cr .mc-menu.mc-grid .mc-btn2 { min-width: 200px !important; } .cr .mc-score .mc-star-text { margin-left:0px !important; } .cr .mc-score .mc-rate div{ display: flex !important; align-items: center; flex-direction: column; } .cr .mc-rate-stars .mc-stars { margin-left:0px!important; } .cr .mc-rate-stars{ display: flex; flex-direction: column; align-items: center; } .cr .mc-score .mc-rating{ background:none; font-size: 32px !important; } .mc-c .mc-btn2 { margin:0 !important; padding:0 !important; } .cr .mc-menu.mc-grid .mc-btn2{ float:right; width:188px !important; } .cr .mc-score .mc-btn2 svg, .cr .mc-menu.mc-grid .mc-btn2 svg, .cr .mc-menu.mc-grid .mc-cr.mc-sm { display:none; } .cr .mc-score > div, .cr .mc-score.mc-score-sm > div{ margin-top:10px !important; margin-bottom:10px !important; } .cr .mc-rate div, .cr .mc-rate span{ margin-bottom: 0.5rem !important; } } @container cackle style(--createfirst: false) { .cr .mc-score{ flex-direction: column-reverse; flex: 2; } } .cr .mc-rate-stars .mc-count-cnt { clear: both !important; float: left !important; } .cr .mc-score .mc-rating, .cr .mc-score .mc-star-text{ font-size:32px !important; line-height: 130% !important; border: none !important; background: none !important; vertical-align:bottom !important; } .cr .mc-rate-stars .mc-stars{ float: left!important; } .cr .mc-sort.mc-nav { display:none!important; } .cr .mc-menu .mc-sort-toggle{ display:block!important; } .cr .mc-menu{ padding-bottom:20px!important; } .cr .mc-menu, body .cr .mc-menu { font-family: inter-regular,Arial,sans-serif!important; letter-spacing: .005rem!important; margin: 0!important; font-size:14px !important; } .cr .mc-grid-xs{ float:right !important; } .cr .mc-grid-xs:first-child{ float:left !important; width: auto !important; background-color: #f6f6f6 !important; padding-left: 10px !important; padding-right: 10px !important; border-radius:10px !important; } .mc-grid-xs .mc-sort-label{ font-size:14px !important; } .cr .mc-menu .mc-sort-toggle{ color: #333333 !important; } .mc-reviews .mc-review-wrap, .cr .mc-reviews .mc-review-wrap { background: var(--main-bg-color) !important; font-family: inter-regular,Arial,sans-serif!important; letter-spacing: .005rem!important; padding: 2rem!important; border-radius: 10px!important; padding-bottom: 1rem!important; } .cr .mc-sort-toggle{ padding:14px 0 10px 0 !important; } .cr .mc-reviews, body .cr .mc-reviews { grid-gap: 2rem; display: grid; margin-top: 2rem!important; } .cr .mc-review-username, body .cr .mc-review-username { font-family: inter-regular,Arial,sans-serif!important; letter-spacing: .005rem!important; max-width: 20rem!important; } .cr .mc-review-wrap{ display:flex!important; } .cr .mc-comment-username, .reviews__content .cr .mc-review-username, body .cr .mc-comment-username, body .cr .mc-review-username { font-family: inter-regular,Arial,sans-serif!important; font-size: max(1.6rem,16px)!important; letter-spacing: .005rem!important; line-height: max(2.0rem,20px)!important; } .cr .mc-comment-user, .cr .mc-review-user { min-width:48px !important; } .cr .mc-review-info, body .cr .mc-review-info { font-family: inter-regular,Arial,sans-serif!important; letter-spacing: .005rem!important; margin: 0!important; padding-left: 0!important; position: relative!important; flex-grow:5; padding: 0.3em 1em !important; } .cr .mc-review-head, body .cr .mc-review-head { display: flex!important; font-family: inter-regular,Arial,sans-serif!important; justify-content: space-between; left: 0!important; letter-spacing: .005rem!important; right: 0!important; width: 100%!important; } .mc-review-head .svg-container { position: initial !important; height: initial !important; float: initial !important; width: initial !important; top: initial !important; } `; var cb = { ready: [function() { if((navigator.platform !='MacIntel' && navigator.platform != 'Iphone' )||((navigator.platform =='MacIntel' && typeof (navigator.userAgentData)!='undefined') && navigator.platform !='Iphone')){ const style1 = document.createElement('style'); const style2 = document.createElement('style'); const style3 = document.createElement('style'); const reviewDiv = document.createElement("div"); const reviewCont = document.createElement("div"); const scoreText = document.createElement("div"); const newContent = document.createTextNode("Оценка"); reviewDiv.classList.add("review-div"); reviewCont.classList.add("review-cont"); const currentReview = document.getElementsByClassName("mc-reviews")[0]; const dialog = document.getElementsByClassName("cr-form")[0]; const section = document.getElementsByClassName("section")[0]; section.appendChild(dialog); const currentScore = document.getElementsByClassName("mc-score")[0]; const currentGrid = document.getElementsByClassName("mc-grid")[0]; const pagination = document.getElementsByClassName("mc-reviews-pagination")[0]; const currentGridClone= currentGrid.cloneNode(true); const rateStars = document.getElementsByClassName("mc-rate-stars")[0]; const countCnt = document.getElementsByClassName("mc-count-cnt")[0]; const rate =document.getElementsByClassName("mc-rate")[0]; const rateCount = document.getElementsByClassName("mc-rate-schema")[0]; const rating = document.getElementsByClassName("mc-rating")[0]; const button = document.getElementsByClassName("mc-btn2")[0]; const button2= button.cloneNode(true); button2.addEventListener("click", function (e) { button.click(); }); const whiteLable = document.getElementsByClassName('mc-cr mc-sm')[0]; currentReview.parentNode.insertBefore(reviewDiv,currentReview); rateStars.parentNode.insertBefore(scoreText,rateStars) whiteLable.parentNode.insertBefore(button2,whiteLable) //rating.parentNode.insertBefore(newContent,rating) reviewDiv.appendChild(currentScore); reviewDiv.appendChild(currentGridClone); reviewDiv.appendChild(reviewCont); reviewCont.appendChild(currentReview); reviewCont.appendChild(pagination); if(typeof countCnt != 'undefined'){ rateStars.appendChild(countCnt); } //rating.appendChild(newContent); scoreText.appendChild(rateCount); //currentReview.appendChild(pagination); var designs = [ { featured: true, column: false, scorefirst: true, createfirst: true, starColor:'#EB7100', bgColor:'#f6f6f6', buttonColor: '#fe7200' }, { featured: true, column: true, scorefirst: true, createfirst: true, starColor:'#EB7100', bgColor:'#ffffff', buttonColor: '#fe7200' }, { featured: true, column: true, scorefirst: true, createfirst: true, starColor:'#EB7100', bgColor:'#f6f6f6', buttonColor: '#fe7200' }, { featured: true, column: true, scorefirst: true, createfirst: true, starColor:'#006943', bgColor:'#e3f8e7', buttonColor: '#006943' }, { featured: true, column: false, scorefirst: true, createfirst: true, starColor:'#006943', bgColor:'#e3f8e7', buttonColor: '#006943' }, { featured: true, column: true, scorefirst: true, createfirst: true, starColor:'#e6c576', bgColor:'#e3f1fa', buttonColor: '#e6c576' } ] var i = 0; var nextVal = ()=>{ if(i==designs.length-1){ i=0; var design = { featured: true, column: true, scorefirst: true, createfirst: true, starColor:'#EB7100', bgColor:'#f6f6f6', buttonColor: '#fe7200' } return design; } else{ //Cackle.bootstrap(true); var design = designs[i]; i++; } return design; } const newtDesign = document.getElementsByClassName("next")[0]; newtDesign.addEventListener("click", function (e) { var design = nextVal(); style1.innerHTML = css1(design); const pre = document.getElementsByClassName("pre")[0]; pre.style.display="block"; pre.innerText = '#mc-container:{\n'+ Object.entries(designs[1]).map(([k, v]) => ` ${k}:${v}`).join(';\n')+'\n}' }); const userPic = document.getElementsByClassName("userpic")[0]; var displayToggle = true; userPic.addEventListener("click", function (e) { displayToggle = !displayToggle; style3.innerHTML = css3({display:displayToggle}); document.head.appendChild(style3); }); style1.innerHTML = css1(designs[1]); document.head.appendChild(style1); const pre = document.getElementsByClassName("pre")[0]; pre.innerText = '#mc-container:{\n'+ Object.entries(designs[1]).map(([k, v]) => ` ${k}:${v}`).join(';\n')+'\n}' style2.innerHTML = css2; document.head.appendChild(style2); }}] }; cackle_widget = window.cackle_widget || []; cackle_widget.push({host: 'cackle.me', widget: 'Review', id: 1, channel: '/', lang: 'ru', product: {name: 'Cackle Reviews', price: 600, priceCurrency: 'RUB'}, callback: cb }); (function() { var mc = document.createElement('script'); mc.type = 'text/javascript'; mc.async = true; mc.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cackle.me/widget.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling); })(); </script> <pre style="display:none" class="pre" id="pre"> #mc-review { container-name: cackle; container-type: inline-size; --featured: true; --column: true; --scorefirst: false; --createfirst: true; } </pre> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3"> <ul class="list-unstyled"> <li><a href="/">Главная</a></li> <li><a href="/about">Информация о компаниии</a></li> <li><a href="/pricing">Тарифы</a></li> <li><a href="/help/widget-api">API для разработчиков</a></li> <li><a href="/faq">Часто задаваемые вопросы</a></li> <li><a href="/insales">Установка для InSales</a></li> <li><a href="/contacts">Контакты</a></li> </ul> </div> <div class="col-sm-3 col-md-3"> <ul class="list-unstyled"> <li><a href="/comments/wordpress">Комментарии для WordPress</a></li> <li><a href="/comments/joomla">Комментарии для Joomla</a></li> <li><a href="/comments/joomla_k2_virtuemart">Комментарии для K2 Virtuemart</a></li> <li><a href="/comments/drupal">Комментарии для Drupal</a></li> <li><a href="/comments/instantcms">Комментарии для InstantCMS</a></li> <li><a href="/comments/dle">Комментарии для DLE</a></li> <li><a href="/comments/bitrix">Комментарии для Битрикс</a></li> </ul> </div> <div class="col-sm-3 col-md-3"> <ul class="list-unstyled"> <li><a href="/comments">Система комментариев</a></li> <li><a href="/reviews">Система сбора отзывов</a></li> <li><a href="/chat">Онлайн консультант</a></li> <li><a href="/polls">Сервис опросов</a></li> <li>Демонстрация решений</li> </ul> </div> <div class="col-sm-3 col-md-3"> <ul class="list-unstyled"> <li><a href="/license">Соглашение</a></li> <li><a href="/privacy">Конфиденциальность</a></li> <li><a href="/cookie">Условия использования файлов cookie</a></li> </ul> <br> <ul class="list-inline"> <li><a href="https://vk.com/cackle" target="_blank" rel="nofollow"><span class="provs shadow vk"></span></a></li> </ul> <div class="raec"> ООО "Ди Кей Продакшен" участник:<br> <a href="http://raec.ru" target="_blank" rel="nofollow"> <img src="/static/img/raec.png" style="width:100%" alt="Российская ассоциация электронных коммуникаций"> </a> </div> </div> </div> <hr> <div class="row"> <div class="col-sm-4 col-md-4">© 2011-2025 Cackle. Все права защищены. <br>Продукт компании ООО "Ди Кей Продакшен"</div> <div class="col-sm-4 col-md-4 col-sm-offset-1 col-md-offset-1"> <a href="/pricing"> <img src="/static/img/bankcard.png" alt="visa mastercard"> </a> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="/static/js/bootstrap.min.js"></script>  <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-33587727-1', 'auto'); ga('send', 'pageview'); </script> <script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script> <script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#f3f9f9", "text": "#838391" }, "button": { "background": "#2d6ca2" } }, "theme": "classic", "position": "bottom-left", "content": { "message": "Продолжая пользоваться сайтом, я даю согласие на использование файлов cookie.", "href": "cackle.me/cookie", "dismiss": "Принимаю", "link": "Подробнее", } }); </script> </body> </html>

CINXE.COM

Демонстрация системы сбора отзывов - Cackle