TechQA.

Embedding Zendesk Widget into a Rails application

1.2k views Asked by At 
Rails 3.2

I am trying to embed the zendesk widget, into my Rails application. The instructions, call for embedding the code, as the end of the head section.

Here's the 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 -->

I am using .slim, so here's what I did in 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

The javascript, is supposed to create an icon in the lower right corner.

When I look at the page html source code, here's what I get:

<!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 am not, however, seeing Zendesk icon in the bottom right of the page. Any ideas?

javascript ruby-on-rails zendesk zendesk-api
Original Q&A
1

There are 1 answers

1
Dario Barrionuevo On BEST ANSWER

The problem is maybe related to the <script> tag being rendered twice? However, I installed this script before in my Rails app and here is what I did to have a cleaner solution:

1) Create a new JS file for the Zendesk script, is ugly to have embedded such a long piece of code in your template. I usually put this kind of scripts in vendor/assets/javascripts/, so you should end up having something like vendor/assets/javascripts/zendesk.js. Please note that you should not include <script> tags in this file, just the JS code starting at /*<![CDATA

2) Instruct Rails to precompile this file adding this line to config/initializers/assets.rb: Rails.application.config.assets.precompile += %w( zendesk.js )

3) In your application layout add the line = javascript_include_tag 'zendesk'

After testing this is working properly, you may want not to include the script for the development environment, because it will slow down your local requests. You should take the same approach you took with analics.js

Related Questions in JAVASCRIPT

Related Questions in RUBY-ON-RAILS

Related Questions in ZENDESK

Related Questions in ZENDESK-API

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions