A new UX and design company is trying to make it easier for non-programmers and designers to easily add common code elements to their site. Filament has turned code into drag and drop apps that anyone can quickly and easily add to their existing website. The site itself is free to use and claims to connect to any website or CMS (such as WordPress). All you need is an account and a website to get started.
Limited Apps To Start
Since Filament is relatively new, the selection of code apps is extremely limited. They currently have six apps to choose from. Flare, Passport, Ivy and Mailchimp are all social sharing related. CodeDrop lets you quickly add code snippets to your site without FTP and Google Analytics makes it easier than ever to add the Google Analytics code to your site to track visitors and more.
Eight more apps are in the works. These currently include Crazy Egg, FlipJack, Highlite, SideCar, SlideDeck App, Mixpanel, Olark and Optimizely. These will help you add elements such as a content slider, more analytics and live chat. While there isn’t a date set for the release of these apps, the lineup is promising.
How It Works
For once, it really is simple to setup something on your website. All you need to do is create a Filament account, connect it to your website or sites and drag and drop the apps of your choice onto your website. This is all done within Filament. In my own tests, it took only a few minutes to add Google Analytics to my site.
Step By Step Process
If you’re ready to try it for yourself, sign up for the free account at Filament. Scroll to the bottom of the page and click the Sign Up Free button.
Sign up using your existing Google or Facebook account. Or you can enter your email and click Sign Up. If you choose the first two options, enter your normal login credentials for that account. While any of the options will take you to the next step, if you choose to use your email address, you’ll need to check your email, open the message from Filament and click the Confirm link to verify you did create the account.
If you want to connect your website now, enter the site’s address, such as www.mysite.com. Press Next to continue. If you’d prefer to do this later, click Do This Later underneath the Next button.
The next step is the hardest as you’ll be dealing with the code itself. You’ll only need to do this once per site. The code you’re given allows Filament to communicate with your website so you can add the code apps. Copy the code exactly as it’s shown and login to your website’s dashboard. Locate the code for your website. This location varies greatly based on who your host is. Check the FAQs or support for your host if you need help.
When you find the code, press Ctrl + F to open the search function. Type and press Enter to locate the head tag. Click any area beside press Enter and paste the code directly below this tag. Save any changes and republish your site if necessary. There will be a republish or publish changes options if this is required.
Please note you don’t have to enter any code on your site at this point. You can do this later.
Return to Filament for the next step.
Press Test Connection to ensure Filament can connect to your site. If it connects, you’re good to go. If not, you can try again or press I’ll drop the code later to continue your account setup. In my experience, it took a few hours before Filament showed a good connection for my site. You’ll still be able to see your site in the Filament dashboard in the meantime.
The next step is choosing an app. Once you make your choice, follow the app specific steps to drag the app to the right location. Some apps are page specific while others are site wide. If you need help at any time, click the Help Center link in the top right corner or the Take the Tour link in the bottom left corner of the screen.
Things To Consider
Filament will only work with sites where you’re allowed to edit the code. Some freely hosted sites don’t allow this. Check with your provider before trying to use this option.
Filament is still in Beta, which means there may be some kinks to work out.
Finally, if you chose the email option for creating your account, you must verify your account in order to create a password to access Filament in the future.