Swiftype with webflow

Hey guys I’m looking to use swiftype for a search feature in my site but I’m not sure how to do it when it comes to section regarding embed the HTML in the form and the Javascript they ask you to embed. Can someone at webflow give a bit clearer instruction or a brief step by step than the info in the tip and tricks thread. Thank you thank you!

Hi @David_Moore

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

Sure here’s a link to my site https://preview.webflow.com/preview/ct-therapy?preview=4731ee4dc9402222666301ad5c66116b

Hmm ok @PixelGeek , I’m trying to integrate Swifttype search into my site similar to what Webflow has done here. As you’re building your search feature Swift asks you to input a javascript code as well as an HTML code. So currently I’ve placed the javascript in the custom code section and I’d renamed my " text field " to match the class id swift gave me but I’m not sure where to place that HTML code within my form. they way I have it integrated now produces no results.

class: st-default-search-input

Html code to be entered into search field

<input type="text" class="st-default-search-input">

javascript code:

 <script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

  _st('install','soQ2Jo6RrEL4ZieiWk8k','2.0.0');
</script>

Still pretty confused here and I’m just getting a gray box where my search feature should be. Any suggestions?

Hi @David_Moore

the first fix should be to change the class name of your textfield:
https://www.evernote.com/l/AiRdJEj-e81EJ7BzCSldUWCtxd4SUhSsa4U

second fix would be to remove/delete this element:
https://www.evernote.com/l/AiRiWo8qijVOoosnpLgmXsDIS31RxaVwn8k

lastly. Put that javascript code into the footer area of your custom page settings. For more information on this, please refer to this article: Custom code in head and body tags | Webflow University

:slight_smile: hope this helps you out

Whew thank you @PixelGeek you’re the man! The last question I have is since I’m removing that html block element then where do I put that html script <input type="text" class="st-default-search-input">

that script is basic HTML that is already half done for you with webflow.

just change the class name of your textfield like i showed you in my first screenshot. That textfield is the same thing as <input type="text"

:slight_smile:

THANK YOU / GRACIAS / DANKE @PixelGeek

@PixelGeek for example, it works not but swift does not seem to be accepting my styles. It loads for half a second then reverts back to the original look.

Any luck from anyone to help figure out what this small issue is ?

Hello @David_Moore

I noticed that the class name for your input field is incorrect. Please refer to this screenshot: https://www.evernote.com/l/AiTv8hkWmrFESIkTnCAiMbyjdcH9wyyHY1g

Also, try moving your custom code from the “HEAD” area to the “FOOTER (or before the end body)” area.

​Try these steps and let me know if you’re successful.

I’ve done both things as there are two tutorials here w/ conflicting information. Neither have been successful @PixelGeek also the “javascript:void(0);” turns red when I enter it into the field.

I just changed it back and now it works again but my styling won’t hold. if you check the preview page it appears then disappears. @PixelGeek

this is what i see currently on http://ct-therapy.webflow.io:

https://www.evernote.com/l/AiTXC3vVIHxCNo2SAqkZXV9ZklAiCNo6avQ

please note that custom code will not work inside the designer tool. it will only work on a published page :slight_smile:

That I have locked down. It’s the styling that has me pulling my hair out lol. below I have taken screenshots of how my page looks in design mode vs when published. Yet I dont see this covered anywhere. Yet on the webflow help page it has been stylized to align with the rest of the site @PixelGeek

When published

In design mode

This is what I see happening when i load the page: http://quick.as/7pYofGaqr

What is happening is that, after your page loads, the swiftype javascript executes. After it executes, swiftype overwrites your styles on that input box.

I haven’t used Swiftype. Is there a way to customize the box via their website?

1 Like

Not sure if I’m too late to the party and you have the basis of the integration sorted, but I did a quick post on how I integrated Swifttype here. Thanks to a few helpful comments, also addresses the issue:

1 Like

@domin8tor lol not at all. The pain I’m having now is that I’m losing my styling if you check out what has been posted above ( the screen shots you’ll see what I mean. If I could just get that part hammered out I’d be GOLDEN. ( your post was very helpful and sorely needed)

I’m not sure if I’m looking at the latest versions of your website and webflow designer preview, but I’m comparing it to my setup of Swiftype on another website.

I noticed that you have the “st-default-search-input” as the name of the style, where as I have it in the ID of the settings tab of Webflow. Has this been fixed from previous posts? Maybe a start to helping you out.

It’s hard to replicate as I can’t publish from the preview mode of Webflow.