Incorporation du widget Zendesk dans une application Rails

Rails 3.2

J'essaie d'intégrer le widget zendesk dans mon application Rails. Les instructions, appelez pour l'incorporation du code, comme la fin de la section tête.Incorporation du widget Zendesk dans une application Rails

est ici le script:

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

J'utilise .slim, alors voici ce que je l'ai fait dans les vues/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

Le javascript, est censé créer une icône dans le coin inférieur droit.

Quand je regarde le code source de page html, voici ce que je reçois:

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

Je ne suis pas, cependant, de voir l'icône Zendesk en bas à droite de la page. Des idées?

Source

2017-01-06 EastsideDeveloper

Le problème est peut-être lié au rendu de la balise <script> deux fois? Cependant, j'ai déjà installé ce script dans mon application Rails et voici ce que j'ai fait pour avoir une solution plus propre:

1) Créer un nouveau fichier JS pour le script Zendesk, c'est moche d'avoir intégré un si long morceau de code dans votre modèle. Je mets généralement ce type de scripts en vendor/assets/javascripts/, donc vous devriez avoir quelque chose comme vendor/assets/javascripts/zendesk.js. S'il vous plaît noter que vous ne devez pas inclure <script> balises dans ce fichier, juste le code JS à partir de /*<![CDATA

2) Demandez Rails précompiler ce fichier en ajoutant cette ligne à config/initializers/assets.rb: Rails.application.config.assets.precompile += %w(zendesk.js)

3) Dans votre mise en page d'application ajouter Après avoir testé cela fonctionne correctement, vous souhaiterez peut-être ne pas inclure le script pour l'environnement de développement, car cela ralentira vos demandes locales. Vous devriez prendre la même approche que vous avez pris avec analics.js

Source

2017-01-06 02:33:10

Awesome. Ça a marché. Je ne suis pas très familier avec Javascript (je m'occupe surtout d'APIs et de backend), mais je pense qu'il est temps pour moi d'avoir de la profondeur en javascript – EastsideDeveloper

Incorporation du widget Zendesk dans une application Rails

Répondre

Questions connexes