Zendesk 위젯을 Rails 애플리케이션에 임베드

Rails 3.2

내 Rails 애플리케이션에 Zendesk 위젯을 내장하려고합니다. 헤드 섹션의 끝으로 코드 삽입을위한 지침. 그래서 여기Zendesk 위젯을 Rails 애플리케이션에 임베드

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

자바 스크립트를 생성하도록되어/나는 뷰/레이아웃에 무슨 짓을했는지 application.html.slim의 내가 .slim 사용하고

<!-- 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 -->

: 여기

스크립트입니다 오른쪽 아래에 아이콘이 있습니다. 나는 페이지의 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>

I 페이지의 오른쪽 하단에 젠 데스크 아이콘을보고, 그러나 아니다. 어떤 아이디어?

출처

2017-01-06 EastsideDeveloper

<script> 태그가 두 번 렌더링되는 것과 관련된 문제 일 수 있습니까? 그러나 필자는이 스크립트를 Rails 응용 프로그램에 설치하기 전에 여기에 더 깔끔한 솔루션을 제공했습니다.

1) Zendesk 스크립트를위한 새로운 JS 파일을 만들려면 이렇게 긴 코드 조각 귀하의 템플릿에. 보통 이런 종류의 스크립트를 vendor/assets/javascripts/에 넣으므로 vendor/assets/javascripts/zendesk.js과 같은 것을 사용해야합니다. 이 파일에 <script> 태그를 포함하지 않도록 유의하시기 바랍니다, 그냥 JS 코드는 config/initializers/assets.rb이 줄을 추가이 파일을 미리 컴파일 /*<![CDATA

2) 지시합니다 레일에서 시작 : 응용 프로그램 레이아웃에서 Rails.application.config.assets.precompile += %w(zendesk.js)

3) 추가 = javascript_include_tag 'zendesk'

이 테스트가 제대로 작동하면 로컬 요청의 속도가 느려지므로 개발 환경에 스크립트를 포함하지 않을 수 있습니다. analics.js

출처

2017-01-06 02:33:10

굉장한 방법으로 가져 가야합니다. 그것은 효과가 있었다. 나는 자바에 정통하지 않다. (대부분 API와 백엔드를 다룬다.)하지만 자바 스크립트에서 깊이를 느낄 때가왔다. – EastsideDeveloper

Zendesk 위젯을 Rails 애플리케이션에 임베드

답변

관련 문제