Professional timelines for your website

Frequently asked questions

Instructions on how to create and update timelines using ChronoFlo.

General

What is ChronoFlo?

ChronoFlo allows organisations to very easily create a professional quality interactive timeline that they can host on their website.

The way ChronoFlo works is that you initially create the timeline using our web app. Once you have completed the timeline, we send you over the assets to host on your own servers. We also provide a simple process by which you can update the timeline on your own servers.

Organisations use our service to create timelines to celebrate their history (for example, if they have just reached a key anniversary), to outline progress they have made in product development or research and for many other purposes.

ChronoFlo can also be used by digital, design and communication agencies to create timelines for their clients.

Do I have to pay for ChronoFlo?

Yes. ChronoFlo is not a free service. We charge a license fee for each timeline that an organisation hosts on their websites. Please contact us at hello@chronoflo.com for a quote for your particular need.

ChronoFlo is aimed primarily at businesses and public sector organisations, rather than individuals. Our software can also be used by digital, design and communication agencies to create timelines for their clients.

Why ChronoFlo?

Quite simply, because ChronoFlo offers the best looking, most easily customisable and most feature rich timelines available on the web.

Price-wise, a ChronoFlo timeline is significantly cheaper than employing a web developer to make a timeline for you. The end result with ChronoFlo would likely be much better too - ChronoFlo has been steadily improved and refined over a number of years.

Technical spec?

The great thing about ChronoFlo timelines is that they use standard web technologies such as HTML5, CSS and JS. That means they can easily be installed on any webserver. They work in all modern browsers and also on Apple's IOS devices (iPad, iPhone and iPad). We even support internet explorer back to IE6 (though the timeline may look slightly different and be missing certain features in older IEs).

ChronoFlo timelines also do not require any database or back end integration, so can very easily be integrated with existing websites or included as part of a new website.

I am interested. What next?

Great news! We're thrilled we've piqued your interest. See the next steps below.

  • 1Email us at hello@chronoflo.com and a representative will get in touch to find out more about your specific needs.

  • 2Once we have found out exactly what you are looking for, we will provide a quote for how much it would cost.

  • 3We will then create an account on ChronoFlo.com for you so that you can create a timeline to test out our software and see if it meets your needs.

  • 4Assuming that goes well, we'll then draw up a license agreement, which you will sign and email back.

  • 5Finally, we will send over the timeline assets for you to install on your own servers.

My ChronoFlo account

How do I get an account on ChronoFlo?

Contact us at hello@chronoflo.com and we'll set you up with an account to test out our software or create your timeline.

How do I log in to my ChronoFlo account?

You log in to your account by clicking the 'Login' menu option at the top right of the screen. You should then enter your username and password in the pop down panel that appears and click the login button. Assuming, you have entered all the details correctly, you should now be logged in and able to start editing and creating timelines.

I've forgotten my login details. What should I do?

Firstly, you should select the 'Forgotten login details' link at the bottom of the login panel (which you can open by clicking on the 'Login' menu option at the top right of the screen). You will then be asked to enter the email that you used to sign up to ChronoFlo. Enter your email and click the 'Submit' button.

We'll then send you an email with your username and a new password. You can then login with this password and then change the password by going to the 'Account Settings' panel on the home page when logged in or the 'My Account' tab in the gray admin panel on a timeline page.

If you don't receive an email from us or can't remember the email address of your account, then drop us an email at help@chronoflo.com and we'll do our best to recover your details for you.

I can't seem to login. Please help.

Firstly, you should follow the instructions in the above two FAQs (How do I log in to ChronoFlo? and I've forgotten my login details. What should I do?). If you still can't login then drop us an email at help@chronoflo.com and we'll do our best to help you.

How do I update the timeline on my server?

The way ChronoFlo works is that you make changes to your timeline on www.chronoflo.com first. Once you have completed those changes, you export the updated timeline data in JSON format and use this to replace the JSON data in your server version of the timeline. The exact steps are as follows:

Creating a Timeline

How do I create my first timeline?

If you haven't yet created an account with Tiki-Toki, do so now - see here for how. If you have, then please ensure you are logged in.

  • 1Now navigate to the Tiki-Toki home page (www.tiki-toki.com). Here you will find a list of timelines you have already created and also a form for creating a new timeline.

  • 2Enter the required information. The timeline's title, start and end dates and introduction text must be provided. All other fields are optional. If you are not sure what to enter into any of the fields, then roll over them with you mouse and a popup help panel will appear with instructions.

  • 3Once you have filled in all the information, click the "Create new timeline" button at the bottom. Your timeline will now be created and you will be taken to the timeline's unique page on the web. You can share the url of this page with your friends and colleagues. You will now want to create a story for your timeline - see 'Creating a story' below.

How do I edit my timelines?

  • 1Navigate to the Tiki-Toki home page (www.tiki-toki.com). Here (if you are logged in) you will find a list of timelines you have already created and also a form for creating a new timeline.

  • 2Click on the 'edit' button and you will be taken to your timeline's unique page on the web. On this page, you add new stories to your timeline. You can also change all the timeline's settings, such as background image, introduction text, zoom and so on from the 'Settings' tab. Further options including date formatting can be accessed by clicking on the 'Advanced settings' button in this tab.

How do I change the span of my timeline?

You can change the start and end dates for your timeline from the 'Settings' tab in the gray admin panel at the top right of the screen. You may need to ensure your timeline is selected first. Remember to click the 'Save' button when you are finished.

How do I zoom in and out of my timeline?

Go to the 'Settings' tab for your timeline. You can find this in the gray admin panel at the top right of the screen (you may need to select your timeline first). Towards the bottom of the 'Settings tab' is the zoom setting. Click on a zoom setting to zoom in and out of the timeline.

Zooming is particularly useful if your stories (events) are clustered close together. An alternative to zooming is the 'Spacing' option which can be used to force equal spacing between stories (regardless of their date) and thus prevent overlapping and clustering.

How do I choose a background image for my timeline?

There are two ways that you can do this; when you first create the timeline; and after you have already created it.

  • 1When you first create a timeline (see here for how to create a timeline), you are given the option of selecting a background image for your timeline. You can either enter the url of the image you want to use. Or you can click on the magnifying glass button for other options.

  • 2If you have already created the timeline, then you will need to initially go to the timeline's page (see 'editing a timeline' above). Then, click on the 'Settings' tab for your timeline. Here, you are given the option of selecting a background image for your timeline. You can either enter the url of the image you want to use. Or you can click on the magnifying glass button for other options.

I can't find a background image that works well. Any advice?

It can be quite tricky to find an image that works well with the timeline. You should avoid images which are very busy or have a lot of contrast (very dark and very light areas). An alternative to using an image is to simply set the background of your timeline to a particular color - this can be done in the 'Settings' tab for your timeline or when creating the timeline. Click on the coloured block and choose the color you want to use.

Creating a Story

How do I create my first story?

Once you have created your first timeline (see here for instructions on creating a timeline), you will probably want to create your first story.

  • 1Firstly, ensure that you are on your timeline's unique page (see 'How do I edit my timelines' above). There should be a gray admin panel at the top right of the screen. Also make sure you have the 'Story' tab selected in the admin panel. Now click on the 'Create new story' button at the bottom. The new story form and a story of your timeline should then appear.

  • 2Enter all the required information into the form. The date field is initially set to timeline's currently-selected date - you will probably want to change this. The title and date fields are mandatory. The rest are optional. To put your timeline into a category, you will firstly need to have created some 'Categories' - you can do this from the 'Categories' tab.

  • 3Once you have finished entering information for your story, click the 'Save' button.

  • 4You may now want to add images or vidoes to your story, or provide some accompanying formatted text. See below for instructions on how to do that.

  • 5If you would like to create another story, make sure you click the 'Create new story' button again, else you may end up inadvertently editing an existing story.

How do I edit my stories?

When you create stories for your timeline, they appear in a list in the 'Stories' tab for your timeline. Simply click the 'Edit' button for the story you want to edit, and update the details in the form. Click the 'Save' button when finished.

How do I add an image to my stories?

  • 1Initially, select the story to which you want to add images. You do this by clicking on the 'edit' button for the story in the list of stories (under the 'Stories' tab for your timeline).

  • 2Now open the 'Story media' tab and click on the 'Add new media' button. A form will now appear.

  • 3Fill in the form with the relevant details. Make sure the type menu is set to 'Image'. In the source field, you can either enter the url to an image (for instance if you have the image saved on your own server) or click on the magnifying glass to open up other options. The index field is used to determine the order in which images appear for a story. If you want the image to be the story's main image, set it to the lowest value.

  • 4Once you have filled in the form, click the 'Save' button and the image will be added to your story.

How do I add a video to my stories?

  • 1Initially, select the story to which you want to add vidoes. You do this by clicking on the 'edit' button for the story in the list of stories (under the 'Stories' tab for your timeline).

  • 2Now open the 'Story media' tab and click on the 'Add new media' button. A form will now appear.

  • 3You should now find the video on either Youtube or Vimeo and then paste the url of that page into the source field in the form. The url for a youtube video will look like http://www.youtube.com/watch?v=9xdKW75J49s - a Vimeo one will look like: http://vimeo.com/18008261. You can also paste in a link to an flv file of your own.

  • 4Make sure the 'type' menu in the form is set to 'Video'. The index field is used to determine the order in which videos appear for a story. If you want the video to be the story's main video, set it to the lowest value.

  • 5Once you have filled in the form, click the 'Save' button and the video will be added to your story.

How do I add audio to my stories?

  • 1Initially, select the story to which you want to add audio. You do this by clicking on the 'edit' button for the story in the list of stories (under the 'Stories' tab for your timeline).

  • 2Now open the 'Story media' tab and click on the 'Add new media' button. A form will now appear.

  • 3You now need to enter the source of the audio in the 'Source' field. If you have uploaded the audio to the popular SoundCloud.com audio hosting service, then enter the SoundCloud url for your audio. The url will look a bit like this: http://soundcloud.com/user123/recording-on-friday-1. If you are not using SoundCloud, then you will need to upload the audio file (in MP3 format) to the web, and enter the url of the file in the 'Source' field.

  • 4Once you have filled in the form, click the 'Save' button and the audio will be added to your story.

How do I add categories for my stories?

You create categories in the 'Categories tab' for your timeline. Simply enter a name and choose a colour to create a category. You can then set a story's category by following the 'How do I edit my stories?' instructions above.

I can't seem to add new stories to my timeline. Please help.

You need to click the 'Create new story' button each time you want to make a new story. Otherwise, you may end up endlessly editing the same story.

Images

Recommended image sizes.

There is no fixed size specified for a story image but generally squarish images of around 280 x 280px (at 72dpi) work best. The software auto crops images to display the images in their various contexts. The size at which these images are displayed depends on a variety of factors, including the dimensions of the timeline, the closeness of timeline stories, etc. You can see how images appear - and adjust how they appear - in the different contexts by clicking on the Magnifying glass icon to the right of the source field for an image, and then clicking on image positioning.

For the background, you will will likely need a larger image. The best size of this image will depend on what size you aim to embed or display the timeline. We have found that a 1,200px by 800px image works well.

My images are taking a long time to load.

If your timeline's images are taking a long time to load, it is likely that you have not optimised them for the web. Your story images should be no more than around 50k each. The background image shouldn't be much more than 350-500k. If you images are larger than this, then we advise that you resize them smaller.

If you have lots of images, you may also want to enable Lazy Loading in the Advanced Settings panel (accessible from the Settings tab for your timeline). This will help your timeline load faster by only loading images when they are about to be displayed.

The heads of people are cropped off. What can I do?

Our software automatically crops images to fit a number of set dimensions. You cannot turn off cropping. However, you can reposition the image - click on the Magnifying glass to the right of the image source field, then click on the "Image positioning" button at the bottom. Here, you will see the image in its different contexts. Drag the image in the middle to the position you would like. Bear in mind that our software displays images as big as possible within the set dimensions, so a landscape image will only be positionable horizontally and a portrait image only vertically. Once you have positioned the image, close the lightboxes and click the 'save' button for the image.

Date Formatting

How do I format dates on the timeline?

Tiki-Toki provides lots of customisation options for dates - see the Advanced Settings panel (accessible from the Settings tab for your timeline).

How do I just show the year for stories?

You can do this using the date formatting options in the Advanced Settings panel (accessible from the Settings tab for your timeline).

Timeline Layout

How can I avoid clutter on my timeline?

When you have a lot of stories on a timeline, the timeline often becomes quite cluttered, with stories overlapping each other. This is especially the case with a timeline covering a wide span of time but which has a high concentration of events in a small space of time. Here, we outline several methods of preventing clutter in your timeline.

  • 1You can zoom out of the timeline using the Zoom functionality (see Settings->zoom), creating more space between stories.

  • 2You can use our Equal Spacing modes (see Settings->spacing) to space out your stories equally, regardless of when they took place in time.

  • 3You can use our Top to Bottom spacing modes (see Settings->spacing). These arrange stories in rows, from top to bottom, and allow more stories to fit in the timeline stage without overlapping.

  • 4You may also want to check out our Duration and Category Band timeline view types (see Settings->View types). These use smaller story markers and therefore help prevent story overlap.

Group Edit

How do I activate Group Edit for my timelines?

You can now get others to contribute to your timelines via Tiki-Toki's group edit functionality (available to Bronze, Silver, Teacher and Pupil members). To activate group edit for a timeline, follow these instructions:

  • 1Your first task is to choose a secret word for your timeline. Others will use this secret word to login and contribute to your timeline.

  • 2Once you have chosen a secret word, go to the 'Settings' tab for your timeline. Now click on 'Advanced settings', scroll down to 'Group edit options' and enter the secret word in the 'Secret word' field. Finally, click the 'Save' button.

  • 3A panel entitled 'Edit this timeline' will now appear on your timeline. This is where people will enter their name and the secret word that you have given them and start editing your timeline.

What can people using Group Edit do to my timeline?

Contributors can only create and edit their own stories. They cannot delete other people's stories or change the settings for a timeline.

I've activated Group Edit but it keeps asking people to log out?

People need to log out of their existing TikiToki account before they can group edit someone else's timeline. They can log out by clicking the 'Logout' option at the top right of the screen. Once logged out, they will be able enter their name and secret word given to them by you and start contributing to your timeline.

Sharing

How do I share my timeline with others?

Each timeline has its own unique url (web address) that you can send to anyone so they can view your timeline. The url can be found in the address bar of your browser - it will look something like: http://www.tiki-toki.com/timeline/entry/43/Beautiful-web-based-timeline-software/

Please note that if you have the 'Public' setting for your timeline set to 'no', then others will not be able to view it. Only people logged into your account will be able to view it. You can change this setting in the 'Advanced settings' panel, accessible from the 'Settings' tab for your timeline.

How can I prevent my timeline being viewed by others?

To prevent others from viewing your timeline, set the 'Public' setting for your timeline set to 'no'. You do this in the 'Advanced settings' panel, accessible from the 'Settings' tab for your timeline.

Something's gone wrong - Help!

All my stories have disappeared

This is probably a caching issue with your browser. Simply refresh your timeline in the browser and all your stories should reappear again.