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;
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.
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.
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
I then styled the search box however desired, and wrote the default text.
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
Back to the Swiftype website, I clicked the install tab and changed the configuration to OVERLAY.
Further down, I checked the “My website already has a search field” button, and inputted “#st-search-input” and hit SAVE.
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).
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!
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:
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.
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 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?
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.
