Embed TimeTime into your app.

Requires a custom tenant See creating a custom tenant

TimeTime provides a seamless solution by allowing its scheduling panel to be embedded directly within existing applications. This solution enables the reuse of the user's current session and allows for the customization of certain parameters, such as the primary colors, the application's name, and whether the menu is visible or hidden.

Step 0: Create users

Before integrating TimeTime into your app, you need to ensure that your users are created within the TimeTime system. This is a necessary step because each user must have a corresponding entry in TimeTime to facilitate seamless authentication and session management.

You can create or duplicate your users in TimeTime by making a POST request to the following endpoint, with your API Key

POST

https://api.timetime.in/v1/usersAPI DOCS

Example payload

{
  "email": "email@example.com",
  "externalId": "some-unique-id-for-the-user"
}

Step 1: User login

Login the user into your application as you usually do.

Step 2: Get a login Token

Once the user is authenticated in your application, your server needs to request a login token from the TimeTime server. This can be done sending a POST request to https://api.timetime.in/v1/login-tokens with the externalId parameter.

POST

https://api.timetime.in/v1/login-tokensAPI DOCS

Response

{
    "token": "string"
}

The TimeTime server processes the request and generates a login token for the authenticated user.

• If an user with the externalId does not exists in the system TimeTime will create it automatically.
• For security reasons the login token only is valid for 1h.

Step 3: Embed TimeTime

After receiving the session token from the TimeTime server, your server sends this token to your application.

Use this token to embed TimeTime within your app creating an iframe that loads the following URL:

https://app.timetime.in/login-with-token?token=your-token

Or, if you have a custom domain, you can use that one, example:

https://bookings.acme.com/login-with-token?token=your-token

Replace your-token with the actual session token received from the TimeTime server.

The user will see the embedded TimeTime panel within your application. Since the session token is included, the user is automatically authenticated and can interact with TimeTime without needing to log in again.

Customizing the app with parameters

You can customize the behavior and appearance of the application by using query parameters in the URL. Below are the available parameters and their descriptions:

Parameter	String value	Description	Example
tt_hide_top_bar	"true"	Hides the top bar, ideal for embedding the application within an iframe.	https://example.com?tt_hide_sidebar=true
tt_hide_sidebar	"true"	Hides the sidebar, ideal for embedding the application within an iframe.	https://example.com?tt_hide_sidebar=true
tt_app_name	String	Sets the name of the application. By default, the name is "TimeTime".	https://example.com?tt_app_name=MyApp
tt_theme_color	Color	Specifies the primary color scheme used in the application. The values correspond to the possible values of Chakra UI's theme colors.	https://example.com?tt_theme_color=teal
redirect	TimeTime path	Specifies any specifict page where the user will be redirected after login. If not provided will be taken to homepage.	https://example.com?redirect=dashboard/home/calendar?ids=6b23ca99-3acf-4f2c-a171-c5e581cf46f4

By using these parameters, you can easily adjust the application settings directly from the URL, allowing for a more flexible and personalized user experience.