Streaming live at 10am (PST)

How to integrate FindBerry search engine with Webflow site


#1

Hello everybody!
Lately many of us start to look for an alternative option for a search engine for our Webflow sites. And I want to share what I found.

Service calls FindBerry (http://www.findberry.com) and has pretty affordable range of prices: from FREE to $29.99/month

Positive side

  • Has no commercial in search results, even with a FREE account.
  • Very customizable.
  • Easy to install.
  • Serch results on the separate page FULLY customizable and can have exactly same look as your site design.

“Limitations” side

  • Seems there is no option to show page thumbnail in the search result, but I am still in the communication process with their support team and hope they will tell me how to enable this.
  • Option “Serch results on the separate page” will bring the page with Findberry url in the slug.

Installation process is pretty clear:

  1. Create an account
  2. Add site address
  3. Depend on your preference, copy the code for the SEARCH FORM: (I prefer modal window since it is not effect url)
  • page with search results
  • pop-up (modal) window with search results
  1. Customize Search results appearance.
    They have their standard HTML snippet but you can easily add your own HTML and CSS

Tips


If you will choose Search form with pop-up window search results, you will have to separate their code snippet in few parts and add them to different places on your site:

1. This line goes to the custom code area before </head> tag:

<link href="//www.findberry.com/search/css/colorbox.css" rel="stylesheet" type="text/css" />

2. Next part of snippet will go the custom code area before </body> tag :

<script src="//www.findberry.com/search/js/jquery.min.js" type="text/javascript"></script>
<script src="//www.findberry.com/search/js/findberryfx.js" type="text/javascript"></script>
<script src="//www.findberry.com/search/js/findberry.framebox.js" type="text/javascript"></script>


3. This snippet goes to the embed widget into your page :

<form action="//www.findberry.com/search/" method="get" id="sr_iframe">
  <input type="hidden" name="wid" value="3855" />
  <input id="sr_searchbox" type="text" name="query" size="35" />
  <input id="sr_searchbutton" type="submit" value="Search" /><br />
</form>

Style Webflow form as you want it to look Search form and add Webflow form classes to Findberry form code. You will see styled fields and submit button right in the Designer mode.

Hope it will be useful.

Best regards,
Anna


Search bar functionality
Webflow product roadmap for Search and E-Commerce
Filtering and Displaying Dynamic Content and Pages
Swiftype Integration (Search Bar)
Add a search widget to search Shopify store on Webflow site
How to add Search Bar
Swiftype Integration (Search Bar)
#2

Awesome Anna! Thank you so much. This will come in handy


#3

Always welcome :slightly_smiling: It is not perfect but I find it much nicer and easier to customize than Google search


#4

This is so legit! Excited to have more options that just Swiftype - thanks!! <3


#5

You are welcome, @thewonglv :slightly_smiling:

I asked them if there is the way to add page thumbnails in the search result, but, unfortunately, they do not have such option :confused: Except this fact, service it pretty good.


#6

This.is.awesome! Thanks!


#7

@sabanna you're awesome, thanks a lot for this!

I still get the branding on the search result window though, did u manage to get rid of that?
Also, how did u style the search box? i've been struggling with that.

Kudos for the great tips :wink:

Guil


#8

Thank you Anna.
Can you show us an example from a site of yours or something ?
Take care.


#9

Hello, guys.

Here is a link http://sisterhoodofthecrone.com/blog
Site owner just started to edit content there, may look a bit messy. But you can see the principal.

Cheers,
Anna


#10

Hi @gmaueler,
No, I didn't remove. We installed free version so I knew it will be branded. For search box styling, I created it in Webflow, styled as I need and then used classes in the form code.


#11

You're awesome! thanks for all the advice!


#12

I just asked Findberry about my CMS pages not appearing and this was the answer:

Hi!

Thank you for your message.

It seems that your website was made by Webflow. Sadly, Findberry is unable to index it because of the way it is made.

Please let me know if I can be of further assistance.

Kind regards,

@sabanna, I haven't tried your notes because on first read I thought they were for styling and I'm still in testing... but I might be wrong! Can you clarify? I'd love to be wrong and then try your method.

Thanks!


#13

Hi @trystudio.

Your CMS pages are not appearing where?


#14

Oh, I'm so sorry. In the findberry search results.

I have pages live but not linked because I'm still designing and testing but I thought that they'd still show up after I indexed my page via Findberry.

For example, Marie has a test profile page here: http://trystudioapp.com/profile/marie.

I have been testing with Findberry and Google Custom Search here: trystudioapp.com/searchresults

Findberry is the first one (unstyled) and google's is the second one in the div with black border. When I search either for Marie, I get no results.


#15

It seems that any of the search engines give no results. So I don't think it is only Findberry issue. When did you installed them? Sometimes it may take a long time for indexing all pages.

You can check my client site where I installed Findberry search, it works. http://sisterhoodofthecrone.com/blog
every blog-post by itself is dynamic page.


#16

It has been a week or two.

I'll take a look at your site; thanks!


#17

Hi,

I have to create a search engine with two filters. you can create this with findberry?

Regards


#19

Thanks for posting this!


#20

Check out http://doofinder.com/en/ for Webflow sites


#21

Has anyone tried doofinder yet?