Встраивание виджета Zendesk в приложение Rails

Rails 3.2

Я пытаюсь встроить виджет Zendesk в мое приложение Rails. Инструкции, призывающие к встраиванию кода, как конец раздела head.

Вот сценарий:

<!-- Start of Zendesk Widget script -->
<script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","xxx.zendesk.com");
/*]]>*/</script>
<!-- End of Zendesk Widget script -->

Я использую.slim, поэтому вот что я сделал в views / layout / application.html.slim

doctype html
html lang="en"
  head
    meta charset="utf-8"
    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    - if Rails.env.production?
      = javascript_include_tag "analytics.js"
      title= content_for?(:title) ? yield(:title) : t('layout.site_name')
    - else
      title= request.path.gsub('/', ' ').humanize
    = csrf_meta_tags
    /! Le HTML5 shim, for IE6-8 support of HTML elements
    /[if lt IE 9]
      = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
    = stylesheet_link_tag "//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css", "application"
    = stylesheet_link_tag controller.controller_name if Installio::Application.assets.find_asset("#{controller.controller_name}.css")
    = javascript_include_tag "application", "//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"
    = javascript_include_tag controller.controller_name if Installio::Application.assets.find_asset("#{controller.controller_name}.js")
    = yield :css
    = yield :javascript

    link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144"
    link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114"
    link href="images/apple-touch-icon-72x72.png"   rel="apple-touch-icon-precomposed" sizes="72x72"
    link href="images/apple-touch-icon.png"         rel="apple-touch-icon-precomposed"
    link href="/favicon.ico"                        rel="shortcut icon"
    javascript:
      <!-- Start of Zendesk Widget script -->
      <script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","xxx.zendesk.com");
      /*]]>*/</script>
      <!-- End of Zendesk Widget script -->
  body

JavaScript должен создать иконку в правом нижнем углу.

Когда я смотрю на страницу HTML исходного кода, вот что я получаю:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible" />
      <meta content="width=device-width, initial-scale=1.0" name="viewport" />
      <title> companies tickets</title>
      <meta content="authenticity_token" name="csrf-param" />
      <meta content="8SQUtDCkI0m2DEt+PmGETO4F8hqD60oXLWzOvkm395A=" name="csrf-token" />
      <!--Le HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script><![endif]-->
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
      <link href="/assets/application-92740c7868cf6da1a36b8824c3467f05.css" media="screen" rel="stylesheet" type="text/css" />
      <script src="/assets/application-4c835f73bc6c75e164ae8fa087f33966.js" type="text/javascript"></script>
      <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script><script src="/assets/tickets-0f5809fe7de8a6d1415fbbadf7d24e17.js" type="text/javascript"></script><script src="/assets/price_calculation-61272aba476e0c62104eac34b8ee22b1.js" type="text/javascript"></script><script src="/assets/ajax-table-d6d79fff4bfee3f320d115150c8bd3ca.js" type="text/javascript"></script><script src="/assets/context-form-a8ccf9d4d39039858ccb4950aa97dac5.js" type="text/javascript"></script>
      <link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
      <link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
      <link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
      <link href="images/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />
      <link href="/favicon.ico" rel="shortcut icon" />
      <script type="text/javascript"><!-- Start of Zendesk Widget script -->
         <script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","xxx.zendesk.com");
         /*]]>*/
      </script>
      <!-- End of Zendesk Widget script --></script>
   </head>
   <body>
       ....................
   </body>
</html>

Однако я не вижу значок Zendesk в правом нижнем углу страницы. Есть идеи?

Источник

1 ответ

Решение

Проблема может быть связана с <script> тег отображается дважды? Тем не менее, я установил этот скрипт раньше в своем приложении Rails, и вот что я сделал, чтобы получить более чистое решение:

1) Создайте новый JS-файл для скрипта Zendesk, уродливо встраивать такой длинный кусок кода в ваш шаблон. Я обычно ставлю этот вид сценариев в vendor/assets/javascripts/так что у вас должно получиться что-то вроде vendor/assets/javascripts/zendesk.js, Обратите внимание, что вы не должны включать <script> теги в этом файле, только код JS, начинающийся с /*<![CDATA

2) Поручить Rails прекомпилировать этот файл, добавив эту строку в config/initializers/assets.rb: Rails.application.config.assets.precompile += %w( zendesk.js )

3) В макете приложения добавьте строку = javascript_include_tag 'zendesk'

После тестирования это работает правильно, вы можете не включать сценарий для среды разработки, потому что это замедлит ваши локальные запросы. Вы должны принять тот же подход, который вы использовали с analics.js

Источник
Другие вопросы по тегам