How to embed Timekit in Webflow

You are using Webflow and would like to use Timekit, here's how

d
Written by derrick mak
Updated this week

Webflow is a fantastic tool to create websites in no time. In fact, we have been using it for years to design, develop and host our Timekit.io page. 

Tutorial

1. Open your designer 

This assumes that you already have an account and have created a page. If this is not the case swing over to Webflow's help center: https://help.webflow.com 

2. Add Embed Element   

On the page that you want to use Timekit, find the element called 'embed' in your 'add elements' panel:

3. Copy your Timekit script 

In your Timekit dashboard find the project you wish to show on your Webflow page and navigate to the 'share' tab. Copy the script.

4. Paste into your Webflow Embed Element

Double-click the element you've added to your site and paste in the script from Timekit.

5. Publish your site

You won't be able to see the Timekit widget before you go live. Fortunately, putting sites live in Webflow is literally just a click of a button.

BONUS: CSS tips

Give the <div> element of your 'embed element' a max widget of 650px and auto left + right margins to ensure that the widget is floating nicely in the middle in an appropriate size.   

The -120px top margin and -30px bottom margin is to make the widget stick a little outside the background we are using on the page. 

Did this answer your question?