provide integration for ajax/javascript modal view on ruby on rails - javascript

I am trying to generate javascript code that can be provided to website owners for them to integrate into their HTML. This code would display a button somewhere on their page which opens up a feedback form in a modal view type overlap on their website.
I realize there are a few plugins for ruby online that go with jQuery to create the modal view on a website but how would I create an integration script like shown below
<script type="text/javascript">
var uvOptions = {};
(function() {
var uv = document.createElement('script');
uv.type = 'text/javascript';
uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/KwRuyHwCUkk17M8jW64HDA.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
</script>
I am specifically looking for a gem or a plugin for rails 3 that would make the job easier. If none are available, how hard is it to implement this in rails?
Appreciate any help

Related

MessageBird Omnichannel Widget - Single Page Web App - Errors

I'm using an online ordering solution (white label solution) that only allows code edits via Google Tag Manager. I want to display a chat widget on the solution. Currently using LiveChat but want to change to MessageBird. Having problems with inserting code on single page app.
https://developers.messagebird.com/api/omnichannel-widget/
I've inserted the MessageBird Omnichannel widget via Google Tag Manager firing on all pages or history change (to allow for single page web app).
<script>
var MessageBirdChatWidgetSettings = {
widgetId: '37d411fb-b884-4342-a226-5c8aac703e44',
initializeOnLoad: true,
};
!function(){"use strict";if(Boolean(document.getElementById("live-chat-widget-script")))console.error("MessageBirdChatWidget: Snippet loaded twice on page");else{var e,t;window.MessageBirdChatWidget={},window.MessageBirdChatWidget.queue=[];for(var i=["init","setConfig","toggleChat","identify","hide","on","shutdown"],n=function(){var e=i[d];window.MessageBirdChatWidget[e]=function(){for(var t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];window.MessageBirdChatWidget.queue.push([[e,i]])}},d=0;d<i.length;d++)n();var a=(null===(e=window)||void 0===e||null===(t=e.MessageBirdChatWidgetSettings)||void 0===t?void 0:t.widgetId)||"",o=function(){var e,t=document.createElement("script");t.type="text/javascript",t.src="https://livechat.messagebird.com/bootstrap.js?widgetId=".concat(a),t.async=!0,t.id="live-chat-widget-script";var i=document.getElementsByTagName("script")[0];null==i||null===(e=i.parentNode)||void 0===e||e.insertBefore(t,i)};"complete"===document.readyState?o():window.attachEvent?window.attachEvent("onload",o):window.addEventListener("load",o,!1)}}();
</script>
This works fine on our desktop version - where the widget loads to an area "off screen" to the bottom right but it causes problems on the mobile version - slowing down page loads and interfering with page elements and other tags firing via Google Tag Manager. I suspect the problem relates to our online ordering solution being a single page web app?
I walk through the problem here on video: https://www.loom.com/share/efacb3ebe89e49ceb7b5049da8a31a58
I was previously using LiveChat and also inserted the code via GTM (same triggers). This worked fine and I have this currently on the website.
<script type="text/javascript">
window.__lc = window.__lc || {};
window.__lc.license = 11857671;
(function() {
var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<noscript>
Chat with us,
powered by LiveChat
</noscript>
<!-- End of LiveChat code -->
<script src="https://73b0e137397e4eceb870f14567b2e515.js.ubembed.com" async></script>
I have tried firing the MessageBird widget tag on only the main page, same problem. I have also tried not initializing the MessageBird widget, same problem.
I would appreciate any advice or suggestions.

Opening web page as I see it in browser with Python

Using the google CSE utilities I've made a HTML file that is a barebones version of Google Search (about 1/10th page size), which is as follows:
<script>
(function() {
var cx = '011947631902407852034:gq02yx0e1mq';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
I can open this in my browser like C:\Users\Me\Documents\MyWebpage.html?q=MyQuery and it shows something like this:
This is obviously not what's in the HTML file, so I assume it's generated via JavaScript. Indeed, when I look at the page in my browser there's a lot more HTML than is in the actual file. The 1/10th size comment refers to the size of all of this, if I download it using Inspect Element, selecting the topmost node, Edit HTML, and copying all the HTML and placing it in a file.
My question is: how can I read in all of this HTML for a given query with Python?

google custom search engine execute does not show the results

learning web application. I had usually been in firmware and desktop application software development. I have done a few web pages before, but not as intensive to say a competent front end. Back end I might have more confidence.
Anyway I followed the basic in the development like include the script:
<script>
(function() {
var cx = 'XXXXXXXXXXXXXXXXX:XXXXXXXXX';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div class="gcse-searchbox" data-gname="hobbyinfo"></div>
<div class="gcse-searchresults-only" data-gname="hobbyinfo"></div>
then a button which onclick will call a javascript function that will execute a search.
function doSearch() {
google.search.cse.element.getElement('hobbyinfo').execute('archery');
}
When I test the web application and just put archery on the search box and click search there is a search result showing but when I use the doSearch() nothing is showing. I am just learning google cse, facebook api, and mojolicious. But I think I am implementing the onclick correctly since I am using the simple view page where I can see the html text.
I am not sure if its correct to use "google.search.cse.element.getElement('hobbyinfo').execute('archery')" since I use HTML5 "div class="gcse-searchbox" ..." . Like I said I am not really an experienced Front End developer. Is it still correct to use google.search.cse ... if I use the 'div class="gcse-...' to create the searchbox and searchresults?
I am don't think that its because I am still just working on a virtualbox and have no real web hosting area yet, that the results are showing. Can someone tell me if this is the case?
Although when I manually do a search on the searchbox it does show the search result.

Adding Pinterest image hover widget after Ajax load

I am using the pinterest image hover widget to add the ability for users to pin images off my website to their pinterest accounts.
Widget found here: http://business.pinterest.com/widget-builder/#do_pin_it_button
(Click the image hover radio button under button type to see the one I am using.)
I have the pinterest button working fine on other pages on the website where no ajax is used to load any content using the code provided by pinterest:
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
However where I am encountering a problem is when I am loading some content in a popup window via ajax and I need to have a pinterest button load with that content. I have tried not loading the pinterest code until the ajax request is complete but am having no luck so far. Have tried this:
<script type="text/javascript">
jQuery(document).ajaxComplete(function() {
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
});
</script>
I am not loading the pinterest code anywhere else on this page until using the above method to load after ajax has inserted the extra content into the DOM. I have also tried a few other method's I have found it other topics around the interent but none have helped. I have not been able to find any other solutions that work specifically with the image hover widget so if anyone has had any luck with using it with Ajax before any advice would be awesome.
Thanks :)
I was having the same problem only with the "Any Image" button-type. What helped was this post.
Though I did not use the refreshPinterestButton()-function. I simply loaded the script
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
with the first page load and on subsequent ajax-calls I executed this part:
//remove and add pinterest js
pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
pinJs.remove();
js = document.createElement('script');
js.src = pinJs.attr('src');
js.type = 'text/javascript';
document.body.appendChild(js);
Hope it helps.

Google site search

I need to implement google site search I am using the below code
<script>
(function() {
var cx = '012847953619635190580:vrz-2wloub8';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox></gcse:searchbox>
Problem is shows a warning saying "unknown tag".
Pls help me out
I've never had that issue before, but I use Google Site Search and can make some educated guesses.
Place that script tag at the end of the 'head' section of the enclosing file. It should be there ideally.
This is your best friend: https://developers.google.com/custom-search/docs/element
That page shows many different ways to implement Google Custom Search, and even gives you examples that you can toy with.
And on a side note, do you have a corresponding section somewhere?
To quote that page: "two-column and A two-column layout with search results on one side and a search box on the other. If you plan to insert multiple elements in two-column mode in your webpage, you can use the gname attribute to pair a search box with a block of search results."
Basically, if you are using a 'searchbox' section, you will also need a 'searchresults' section.

Categories

Resources