I'm using the newish style of Google Custom Search that overlays your search results over your current page.
The code below creates a search box that calls the overlay. I'm wondering if there's anyway to create a text link that would also launch the results of the overlay as some of our articles have a line like "You can always search for more references on [person] on our site." The older two page CSE ethod allowed us to call a results page with /search.shtml?q=person
<script>
(function() {
var cx = 'myCSEidnumber';
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:search></gcse:search>
I created a text link like this: /currentpage?cx=myCSEidnumber&q=$mysearchterms
Clicking on that link doesn't create the results overlay. If I copy that link and re-enter it in the browser it does pop up the overlay.
I've searched the Google CSE site and forums but can't seem to find anything. Thanks for any insight.
You don't need the cx param in your url, only the q param. However, you do need the element present in your link target page for the overlay to show up. The element will render both overlay AND search box, but you can hide the searchbox with css, e.g.:
.gsc-search-box {
display:none;
}
Here's an example (although jsfiddle will not render css for you, you need to add it on your page separately):
http://jsfiddle.net/RDHS4/3/
Your HREF should be set using this /?q=$mysearchterms
Example: To display result on the index page or any other page:
href="http://www.your-web-site.com/?q=$mysearchterms"
href="http://www.your-web-site.com/search/?q=$mysearchterms"
href="http://www.your-web-site.com/result.php?q=$mysearchterms"
Then you can go ahead to hide the input field using css.
.gsc-search-box { display:none; }
Related
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.
I have a button:
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src ="my user snap api key";
const firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(script, firstScript);
script.id = "userSnap";
I want to hide it when a certain event is called:
I have tried this but it doesnt disappear
document.getElementById('userSnap').remove()
the button is still there...
There is no css for it in it or anything so i cant adjust a css file it is just dont through user snap
The UserSnap script adds a button to the DOM. You can't hide the effects a script has had on the DOM by removing the script after it has run, instead you need to manipulate the DOM to hide or remove the button itself.
Use your browser's developer tools to figure out if the button has some kind of unique identifying attribute like an ID or class name, and use that to select and remove the button.
Please try this
<div id="userSnap">
just testing
</div>
remove
<script>
function remove_(){
document.getElementById('userSnap').remove();
}
</script>
Fiddle
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.
I'm using the basic code and the standard "compact" theme for GCSE:
<script>
(function() {
var cx = '111111111111111111111:11111111111';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
This renders the input button as:
<td class="gsc-search-button">
<input type="image" src="http://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="search">
</td>
I'd like it to be something like
<td class="gsc-search-button">
<input type="button" value="search" title="search">
</td>
I can't seem to figure out how to do it. Is this possible?
function myCallback() {
$("td.gsc-search-button input").attr("type", "submit").attr("value", "submit");
}
window.__gcse = {
callback: myCallback
}; //.......load google CSE tag after this
This works for me and it keeps all of the event handlers in place.
Using jQuery, you can do it quite easily.
After the Google snippet has loaded, execute this code:
$("td.gsc-search-button").empty().html('<input type="button" value="search" title="search">');
You just need to make sure that the code above runs after Google's code.
-Asrar
The only way that I found to add the search button with text instead of image is changing the theme.
You can change the theme by clicking on the "Look and feel" link on the left side menu during the creation process. Then click on the theme tab to change it. Once you changed to a theme that has the search text you can click on the "Customize" tab to change the colours even more.
https://support.google.com/customsearch/answer/4513783?hl=en
The CSS attribute which is not allowing the button image to be shown is the global box-sizing: inherit in the bootstrap.css file. If you're using bootstrap, you should override this attribute to have inherit or content-box values. You can override this attribute by putting your custom search elements in a div and giving that div a class which has this attribute with !important.
I just found that out and it works for me.
That is it!
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.