Embedding Zendesk Widget into a Rails application - javascript
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?
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
Vue.js css and js declared in index.html are not working
I downloaded a theme providing html, css3, js file and I added the path as below source <!-- Basic --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Porto - Responsive HTML5 Template 7.5.0</title> <meta name="keywords" content="HTML5 Template" /> <meta name="description" content="Porto - Responsive HTML5 Template"> <meta name="author" content="okler.net"> <!-- Theme CSS --> <link rel="stylesheet" href="/static/css/theme.css"> <link rel="stylesheet" href="/static/css/theme-elements.css"> <link rel="stylesheet" href="/static/css/theme-blog.css"> <link rel="stylesheet" href="/static/css/theme-shop.css"> <!-- Current Page CSS --> <link rel="stylesheet" href="/static/vendor/rs-plugin/css/settings.css"> <link rel="stylesheet" href="/static/vendor/rs-plugin/css/layers.css"> <link rel="stylesheet" href="/static/vendor/rs-plugin/css/navigation.css"> <!-- Demo CSS --> <!-- Skin CSS --> <link rel="stylesheet" href="/static/css/skins/skin-corporate-5.css"> <!-- Theme Custom CSS --> <link rel="stylesheet" href="/static/css/custom.css"> <!-- Head Libs --> <script src="/static/vendor/modernizr/modernizr.min.js"></script> It works well when I approach at first However, when i move using router it doesn't run some css and JavaScript. so I tried to add a javascript path on component file <template> <div role="main" class="main"> test </div> </template> <script> import "/static/js/theme.js" </script> When I try like this I can see this error This dependency was not found: * /static/js/theme.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/parents/Robot.vue To install it, you can run: npm install --save /static/js/theme.js is there the way to load whole index.html again? or another way to resolve this issue?
Instead of writing static in the index.html files path, use <%= BASE_URL %>. For example instead of adding all css and script files with href="/static/vendor/modernizr/modernizr.min.js", write like this href="<%= BASE_URL %>/vendor/modernizr/modernizr.min.js"
Vue.js adding local javascript file to head section of HTML document in index.html
I am trying to add a local file to the HEAD section of index.html in my VueJs project. index.html <!doctype html> <meta charset="utf-8"> <html lang="en"> <head> <!-- https://npms.io/search?q=vue%20split --> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Load required Bootstrap and BootstrapVue CSS --> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" /> <!-- Load polyfills to support older browsers --> <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script> <!-- Load Vue followed by BootstrapVue --> <script src="//unpkg.com/vue#latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script> <script src="http://d3js.org/d3.v4.min.js"></script> <script src="../src/assets/js/myfile.js"></script> <title>demo</title> </head> My file structure is as follows: /path/to/project /public index.html /src/assets/js/myfile.js When I add the javascript file, it seems to be interpreted as an HTML file, so in the console, I see the following error: Uncaught SyntaxError: Unexpected token < When I look at the source in the Chrome browser, I see that the js in interpreted as an HTML file.
Summernote works on local, but not on production
What is the possible reason of Summernote.js library working on local, but not on production? I use CDN for it, check my code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{{ env('APP_NAME') }} | #yield('title')</title>
<!-- Favicon -->
<link rel="favicon icon" href="{{ asset('public/favicon.ico') }}">
<!-- Styles -->
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<!-- End Styles -->
and right above closing the body tag
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
dialogsInBody: true
});
});
</script>
<!-- End Scripts -->
You can also remove the protocol and can keep it like this so it will work for any case. <script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
I've managed to figure out the problem. I'm using SSL Certificate for my web app, so I had to change the URLs from http to https I hope this answer will be helpful for another devs!
jQuery not running with the html file
I know there are enough and more questions on this topic, but none of them seem to fix up my problem. I am new to jquery and was trying it out for my code. It just doesn't seem to get up and running. I have tried changing the order in which the script occurs with other scripts, I have checked for the directory in which my jquery file resides, I have tried to use both the CDN version and the downloadable one. Nothing seems to work.
this is the head of my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
i have put jquery at the end of the body of my html
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
In this code I have put the jquery code with the html code itself. I have tried another version by putting the code in a separate file and running it, that doesnt work either.
Any help is much appreciated
I think there's a typo where you add the jquery tag. the file name should end in the extension .js so probably something like this: <script src="./js/jquery-1.11.3.js"></script>
Try
Change <script src="./js/jquery-1.11.3"></script> to <script src="//code.jquery.com/jquery-1.11.3.js"></script>
Change $(document).ready((function) { to $(function(){ or $(document).ready(function(){
Your jquery script src is missing the .js extension
Try this:
<script>
$(document).ready(function($) {
$("div").css("border", "3px solid red");
});
</script>
Put jQuery in the head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
</head>
Why am I unable to acces external javascript files using codeigniter even though they get loaded?
My project is using a combination of Bootstrap and Codeigniter. I cannot access functions within external javascript files. Using firebug in Firefox I can see that these external scripts get loaded. External css files work fine. Please note that jquery works but I suspect that it is because of the jquery.js file that is included in the Bootstrap/Codeigniter framework in directory assets/js/jquery.js Here is my header code within every Codeigniter View: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Fav and touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/icons/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/icons/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/icons/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="/img/icons/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="/img/icons/favicon.png"> <title>Sample Website</title> <!-- Bootstrap core CSS --> <link href="/dist/css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> <!-- Custom styles for this template --> <link href="/css/theme.css" rel="stylesheet"> <link href="/css/carousel.css" rel="stylesheet"> <!-- styles custom to our site --> <link href="/css/style.css" rel="stylesheet"> <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> </head>
Try to add base_url before url: <script type="text/javascript" src="<?= base_url();?>js/jquery.cookie.js"></script>