Streaming live at 10am (PST)

Swiftype Integration (Search Bar)


#1

Hi,

Hopefully this isn't doubling up, but searching through the forums this morning I couldn't find a basic and full tutorial as such to integrate Swiftype into a Webflow site. This would've really helped me, and hopefully a quick overview can help for the future as I think I have it down pat. If there are any errors or further tips, I more than welcome feedback and expansions as that would not only help me but others also! So here we go;

  1. I started by registering for Swiftype at https://swiftype.com/, going through all the registering motions, then let it crawl the site. Hopefully this is all self explanatory.

  2. While crawling, I opened up Webflow, dropped and dragged a new FORM BLOCK into a CONTAINER that was in a SECTION where I wanted the search bar to be (should also note that Webflow's own search bar (support/blog) was an inspiration); you can style this as desired.

  3. From here, I deleted everything in the default form block except for one INPUT. I then gave an ID (not the selector where you style it) for the INPUT (not the form) of "st-search-input". See @thesergie's post here http://forum.webflow.com/t/search-functionality/6655

  4. I then styled the search box however desired, and wrote the default text.

  5. Going up a level from the INPUT to the FORM, in the settings for the FORM I inputted the action "javascript:void(0);" which means that any input doesn't submit the form field through your site (found out the hard way). See one of the last images here: http://forum.webflow.com/t/search-functionality/6655

  6. Back to the Swiftype website, I clicked the install tab and changed the configuration to OVERLAY.

  7. Further down, I checked the "My website already has a search field" button, and inputted "#st-search-input" and hit SAVE.

  8. Off to the left, I grabbed the Swiftype install code and copied and pasted the whole thing into the HEAD area of the custom code (in the dashboard of the Webflow site).

  9. Saved the website, published - and for me, this worked.

Again, this is by no means the correct or 100% way of doing it, however thought that I would share as there are a few posts that touch on it, but nothing that gives a full run down!

Kind regards,
Dom


Native Webflow Search Widget
Can I create search bar on center of my home page (like google)
Search box for CMS published collection data
Webflow product roadmap for Search and E-Commerce
Swiftype Integration
ASK - CMS Pricing and Navigation
Search widget for online store?
Sub Navbar (fixed as per Webflow Forum Design)
ASK - CMS Pricing and Navigation
#2

Awesome! Thanks for the breakdown @domin8tor!


#3

Hey there,

Thanks for the detailed explanation. Though I'm having problems with inputting the action "javascript:void(0);" into form settings, the "Action" section. It turns red when I paste that code there. I tried deleting quotation marks but won't just work, still red, as can be seen on this image here:

I'd be very glad if you could help with that.

Thanks in advance.


#4

Well edit button suddenly disappear on my message so I had to reply once more to add something:

I also tried giving the same ID to the form as the on you gave, tried both with quotation marks and without, still won't work. It's just red again.

Moreover when I put it with quotation marks, it automatically adds http values before the code, like this:

I really need to get this search thing working on my website so please help smile


#5

You need to enter "javascript:void(0)" into the action field to make it work.
The " before the JavaScript stops webflow putting http:// in front of it.

@thesergie would a nice feature to have a spot where hints and tricks like this are summed up.


#6

I tried to insert the " before and after and it still red and the " turns to ' . I tried copying and pasting from your exemple, and typing directly on the action field. nothing seems to work. Any tips on this? Thank you.


#7

I got it to work using ` before and after the java command. Thank you!


#8

oooo . interesting tip. GJ smile


#9

I noticed that Swiftype plan for business is $249 per month with a free Swiftype plan for individuals. Do you know how Individual or Business is defined (couldn't work it out from their Terms)? Could I, for instance, add Swiftype free plan to a Dentist's website?

mike


#11

Hey @FredFort,
I tried to do so, but I cant get it to work. The field is still red. Is that normal?
(European User).

See image for futher detail:

Thanks, Regards
Daniel


#12

@Daniel_Schultheiss, you used wrong character


#13

DANG!!!!! :scream:

Too bad my keyboard setting is quite different than that one. But I ll find it :stuck_out_tongue_winking_eye:.


Thanks :grinning:


#14

try this one


#15

I ll give it a try tomorrow. Thanks. But I think I already tried that one.. :). :beers:


#16

Its still marked red but it does work so .... :innocent:


#17

Could you make screenshot, please?


#18

Now everything is fine. Even it was marked red directly after i entered the string, it is now not marked anymore :).


#19

This worked for me eventually. The action code appeared red, but still worked.
The thing that foxed me for ages was that ALL other posts on this subject say add the swiftype code to the BODY area of the custom code (in the dashboard of the Webflow site) - so I missed the fact that THIS forum post says put it in the HEAD area!!!!!!! Now late at night after wracking my brains for hours I finally noticed this point. Calmed and refreshed in the morning I added the code to the head - worked first time of course. Closure.


Help me swiftype
#20

Great to hear, does get a bit confusing, but glad it resolved itself.


#21

Sounds easy. Thanks for the tutorial.

@domin8tor Could you show us a kind of DEMO? Would be great to see it live!

Thanks,
Friedrich