Swiftype Integration (Search Bar)

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 Search functionality - Product feedback - Forum | Webflow

  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: Search functionality - Product feedback - Forum | Webflow

  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

23 Likes

Awesome! Thanks for the breakdown @domin8tor!

2 Likes

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.

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:

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.

2 Likes

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.

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

1 Like

oooo . interesting tip. GJ :smile:

2 Likes

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

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

@Daniel_Schultheiss, you used wrong character

1 Like

DANG!!! :scream:

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


Thanks :grinning:

try this one

5 Likes

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

1 Like

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

Could you make screenshot, please?

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

2 Likes

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.

1 Like

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

Sounds easy. Thanks for the tutorial.

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

Thanks,
Friedrich

3 Likes