Streaming live at 10am (PST)

Any ideas how to implement Tipue search into webflow?


#1

I have seen the post on implementing Swiftype into Webflow for search functionality.

However I wanted a solution that was more cost effective and came across Tipue.

http://www.tipue.com/

I am battling to figure out how to implement this though. I can add jquery and the call to tipue in the head/footer code section but not sure how to include the tipue search script and setup the rest of it.

Anyone else managed to do this or got any ideas?


#2

Hi!

I managed to integrate Tipue after almost a full day's worth of work.

The implementation is quite easy though you don't need the tipuedrop content file for static mode as stated on the website, just the tipue content file.

One thing that can go wrong is that javascript functions may overlap because you have different files with the same function.
Interface2.js is such a file - I am suspecting that it hides the search results.
What you can always do is reverse engineer - you start with the working demo file, and gradually add your own content. Then you know at which step the code fails.

Much success, tipue is a great plugin.

Thanks,
Ralph


#3

Hi Ralph,

Could you give me a quick step-by-step of how to integrate this with Webflow? I just stumbled across it, and it looks nice, but I have no idea where to begin. For starters, there's no FTP access in Webflow...

thanks for any help!
Justin


#4

Hi,

I did not realise this forum was specifically for Webflow.
I integrated it into a website that does not use Webflow.
I used Tipue static mode because it is easiest to implement and does not need an external server.

I imagine it can work in Webflow though - you can add custom scripts and code:
https://help.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site
https://help.webflow.com/lesson/custom-code

This is the code that needs to go in the body, where you want the search form to appear:

<form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required>
<!--<input type="button" id="tipue_search_button" onclick="this.form.submit();"> -->
</form>

search.html in this case is the page where the search results will be shown.

This is the javascript needed to activate the search function:

<script>
$(document).ready(function() {
$('#tipue_search_input').tipuesearch({
	'show': 10,
	'newWindow'  : false,
	'showURL' : false,
	'showTitleCount'         : true,
	'descriptiveWords'   : 20,
	'highlightTerms' : true,
	'mode': 'static',
});
});
</script>

It needs to go in the body section as well, underneath the code for the search form.

In the head section you will need to add links to the Tipue javascript files, like this:

<!--- Search functionality --->
<script type="text/javascript" src="tipuesearch/tipuesearch_set.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_content.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch.min.js"></script>
<!--- End search functionality --->

So in this case the files are in a folder called 'tipuesearch'. You can also store them elsewhere on the web and link to the URL. I imagine it will also work if you simply add it as javascript code to your Webflow project.

You can also simply add the CSS for Tipue to your already existing CSS code.

Make sure to add all your site's content to the tipuesearch_content javascript.

I hope this helps.
-Ralph


#5

how about you give searchIQ.xyz a trial? It is free.


#6