# Xsplit Broadcaster

{% hint style="success" %}
[You can use the online timer tool without registration and for free anytime from the "Create Timer" button on the homepage.](https://timer-share.com/)
{% endhint %}

TIMERshare can be easily integrated with **Xsplit Broadcaster**, a powerful free streaming and recording software.\
Integration with Xsplit Broadcaster allows you to **display timers on online meeting tool screens or directly on the live stream broadcast screen**.

<figure><img src="/files/NPLg9bOFwb4hZkCJ7hFz" alt=""><figcaption></figcaption></figure>

Additionally, TIMERshare offers the ability to [separate timer elements individually](#id-2-taimnowoshitewosuru) and [set the background to transparent](#id-1-wonisuru). This allows for seamless integration of the timer with other video or presentation materials, enabling **flexible placement according to the screen layout**.

{% hint style="info" %}
Looking for Xsplit Broadcaster? You can download it here.\
<https://www.xsplit.com/broadcaster>
{% endhint %}

> The following step-by-step instructions may vary depending on your environment or software version. Please note that this is not a guide for using the software itself.\
> Company and product names mentioned are trademarks or registered trademarks of their respective owners.

***

## Add TIMERshare to Xsplit Broadcaster

### 1. Add 'Webpage' to Sources

Select "Scene 1" or similar, then click "Add Source" at the bottom left of the screen and choose "Webpage".

<figure><img src="/files/nhzVibXX68WjN5pD6M8h" alt="ソースへ「Webpage」を"><figcaption><p>Add 'Webpager' to Sources</p></figcaption></figure>

### 2. Set the URL Field

In the 'Add Webpage URL' window that appears, paste the URL of the TIMERshare viewer screen into the URL field.

<figure><img src="/files/Az6olJQJYq6lTh0AOVHK" alt="URLフィールドの設定" width="375"><figcaption><p>Set the URL Field</p></figcaption></figure>

{% hint style="info" %}
For instructions on obtaining the viewer screen URL, refer to '[Get Share Link](/en/quick-start/share/get-share-link.md).'
{% endhint %}

### 3. Set Display Size

Right-click the created source and select "Settings."

<figure><img src="/files/6Dsfqcj4VwMrTA9UwbNP" alt=""><figcaption></figcaption></figure>

Change the 'Display' setting from 'Original source' to 'Custom' and set the width to 1280 and the height to 720 (HD / 16:9 aspect ratio).

<figure><img src="/files/XLAr2VYLrn2H5GqYItLa" alt="画面サイズを設定する"><figcaption><p>Set Screen Size</p></figcaption></figure>

{% hint style="success" %}
The width and height do not have to be set to 1280x720. The elements on the viewer screen adjust responsively, automatically fitting any screen size.
{% endhint %}

### 🎉 TIMERshare Displayed in Xsplit Broadcaster

Try starting the timer from the controller screen.

<figure><img src="/files/iNSo7Ryfirb5TObgCxtN" alt=""><figcaption></figcaption></figure>

By the way, TIMERshare can be accessed from any internet-connected device (Desktop/Mobile) via a browser. This makes it easy to control the timer from your smartphone, even if other tools occupy the screen during streaming, ensuring uninterrupted flow.

{% hint style="success" %}
You can use Xsplit Broadcaster’s virtual camera to display the timer [on major online meeting tools](/en/integration/online-meeting-tools.md) like Zoom and Teams.
{% endhint %}

Refer to the following items according to your use case.

***

## Display Timer Over Camera (Use with Camera)

By setting the background to transparent or separating timer elements individually, you can seamlessly integrate the timer with other video or presentation materials, allowing flexible positioning according to the screen layout.

<figure><img src="/files/z63xKCjRncafmXBH6MEi" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="success" %}
You can use Xsplit Broadcaster’s virtual camera to display the timer [on major online meeting tools](/en/integration/online-meeting-tools.md) like Zoom and Teams.
{% endhint %}

### 1. Set Background to Transparent

No chroma key blending or filters are needed. Simply [add the URL parameter](/en/quick-start/advanced-settings-operation/use-url-parameters/viewer-bg-transparent.md) `timer-bg-transparent` to the viewer's share link, and the background will become transparent.

{% code fullWidth="false" %}

```typoscript
ex. https://timer-share.com/timer_sections/UUID?timer-bg-transparent=true
```

{% endcode %}

<figure><img src="/files/kUrJieAEiQqudeLsXtYo" alt="背景を透過色にする"><figcaption><p>Set Background to Transparent</p></figcaption></figure>

### 2. Separate Timer Elements for Screen Layout

Screen trimming can be cumbersome. Simply [add the URL parameter](/en/quick-start/advanced-settings-operation/use-url-parameters/viewer-screen-separation.md#display-only-time-title-progress-bar) `only-timer-display` to the viewer's share link to display only the specified elements.

<figure><img src="/files/FfKHhEZq5Dj7yPiRIZeB" alt=""><figcaption></figcaption></figure>

```typoscript
ex. https://timer-share.com/timer_sections/UUID?only-timer-display=timer
```

<figure><img src="/files/wnLMf0bFylTZPrQp6ux2" alt="要素を分離して画面を構成する"><figcaption><p>Separate Elements for Screen Layout</p></figcaption></figure>

{% hint style="info" %}
When specifying multiple parameters, start the first parameter with '?' and separate the second and subsequent parameters with '&'.

ex. <https://timer-share.com/timer\\_sections/UUID><mark style="color:orange;">**?only-timer-display=timer**</mark><mark style="color:purple;">**\&timer-bg-transparent=true**</mark>
{% endhint %}

***

## Separate Timer and Camera into Different Scenes for Quick Switching

### 1. Set up 'Camera Scene' and 'Timer Scene' in Xsplit Broadcaster

Add new scenes in Xsplit Broadcaster and give them clear, descriptive names.

<figure><img src="/files/lpPhvE9HjPPw57Y3SbqY" alt="「カメラ用シーン」と「タイマー用シーン」を作成する"><figcaption><p>Create 'Camera Scene' and 'Timer Scene'</p></figcaption></figure>

### 2. Select Scenes to Quickly Switch Between Timer and Camera

You can select scenes to quickly switch between the timer and camera.

<figure><img src="/files/4q8qycYXw6Ik1b1vOq3G" alt="タイマーとカメラをクイックに切り替える"><figcaption><p>Quickly Switch Between Timer and Camera</p></figcaption></figure>

{% hint style="success" %}
For more details, you can modify 'Transitions' in Xsplit Broadcaster to enhance visual effects during scene switching. For more information, search online for 'Xsplit Broadcaster Transitions.'
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.timer-share.com/en/integration/live-streaming/integration-with-xsplit-broadcaster.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.