# Touchify Documentation

::u-page-hero
#title
Touchify Documentation

#description
Discover how to use the various Touchify features in this knowledge base.

#links
  :::u-button
  ---
  color: neutral
  size: xl
  to: https://help.touchify.io/en/getting-started/introduction
  trailing-icon: i-lucide-arrow-right
  ---
  Get Started
  :::
::

::u-page-section
  :::card-group
    ::::card
    ---
    icon: i-lucide-waypoints
    title: Getting Started
    to: https://help.touchify.io/en/getting-started/introduction
    ---
    A step-by-step guide to get familiar with Touchify Studio and create your first project.
    ::::
  
    ::::card
    ---
    icon: i-lucide-vector-square
    title: Touchify Studio
    to: https://help.touchify.io/en/touchify-studio/introduction
    ---
    Discover the creation tools available to you in Touchify Studio.
    ::::
  
    ::::card
    ---
    icon: i-lucide-rss
    title: Touchify Publisher
    to: https://help.touchify.io/en/touchify-publisher/introduction
    ---
    Learn how to broadcast your content on your screens.
    ::::
  
    ::::card
    ---
    icon: i-lucide-app-window
    title: Touchify Player
    to: https://help.touchify.io/en/touchify-player/introduction
    ---
    How to install and configure the Touchify Player application on your devices.
    ::::
  
    ::::card
    ---
    icon: i-lucide-life-buoy
    title: Tips & Tricks
    to: https://help.touchify.io/en/tips-tricks/introduction
    ---
    Find best practices and secrets of the Touchify platform.
    ::::
  
    ::::card
    ---
    icon: i-lucide-message-circle-question-mark
    title: Guides and Advice
    to: https://help.touchify.io/en/guides/introduction
    ---
    A series of articles to help you design dynamic and interactive quality projects.
    ::::
  
    ::::card
    ---
    icon: i-lucide-blocks
    title: Applications
    to: https://help.touchify.io/en/applications/introduction
    ---
    Touchify applications, fully compatible with the platform and operating standalone or integrated.
    ::::
  :::

#title
Packed with Many Features
::


# Introduction

Welcome to **Touchify**, the software that brings all your screens to life.

## What is Touchify?

Touchify is a platform for creating interactive and dynamic applications.
It allows you to design engaging user experiences on all types of screens, whether kiosks, tablets, or digital signage monitors.

## Important Concepts

Touchify is built on three important points:

::u-page-columns
  :::u-page-card
  ---
  description: Touchify works on all types of screens, whether touch or dynamic,
    and adapts to all resolutions.
  title: Universal
  ---
  :::

  :::u-page-card
  ---
  description: Touchify integrates a powerful visual editor to create interactive
    and dynamic experiences without coding.
  title: Creative
  ---
  :::

  :::u-page-card
  ---
  description: Touchify offers an all-in-one solution for creating interactive
    applications, with advanced features for all types of screens.
  title: Complete
  ---
  :::
::

## Key Features

Touchify offers many important features to manage all your interactive and digital signage projects:

- **Touchify Studio**: Create dynamic and interactive experiences quickly and simply.
- **Centralized Management**: Control all your screens remotely from a single interface.
- **Offline Mode**: Your content works without an internet connection.
- **Team Management**: Team management functionality for simplified collaboration.
- **Advanced Connectivity**: Connect your content to all kinds of external data sources.
- **External Devices**: Bring your content to life through the integration of sensors, printers, payment terminals...
- **Analytics**: Measure the performance of your content with integrated analysis tools.


# Create a Project

## Accessing the Platform

::note
Touchify is accessible online, from any browser. Make sure you are connected to the internet when you want to use it.
::

### Login

Go to the website [touchify.io](https://touchify.io){rel="nofollow"} and click on the **"Sign in"** button at the top of the page.
You can also type the address [touchify.app](https://touchify.app){rel="nofollow"} directly in your browser's search bar.

Enter your credentials.

> If your profile is linked to multiple accounts, first select the one you want to work in.

![Login page](https://help.touchify.io/1-getting-started/2-create-project/connexion.webp)

## Project Creation

You arrive at the page dedicated to your projects.

If this is your first login, click on the **"Create my first project"** button.

![First login page](https://help.touchify.io/1-getting-started/2-create-project/fr-premiere-connexion-home.webp)

If you already have access to multiple projects, click on the **"Create a new project"** button located at the top right of the section.

![Projects page](https://help.touchify.io/1-getting-started/2-create-project/fr-page-projets-creer.webp)

### Project Type

Several parameters need to be defined when you create a new project.

Three project types are suggested to you: each of them allows you to optimize the features you will use in the Studio.

![Project types](https://help.touchify.io/1-getting-started/2-create-project/fr-creer-type-projets.webp)

- **Interactive Display:** offers a wide choice of different interactions and allows you to customize the project features in depth
- **Dynamic Display:** deepens automatic sequencing, conditions and page transitions functionalities
- **Dynamic Presentation:** adapted for presentation-type projects, possibility to export in PDF format

### Resolution

The format of your project is fully customizable.

A wide list of dimensions is offered to you, classified by resolution or by device type; if needed, enter the desired dimensions by clicking on the right button **"Customize"**.

![Resolution selector](https://help.touchify.io/1-getting-started/2-create-project/fr-creer-resolution.webp)

### Classification Options

You can classify your project in a team or in a folder from its creation.

The **"Team"** function manages accessibility to the project: it can only be seen or modified by members of the selected team.

The **"Folder"** function simply allows you to classify your projects in different categories.

![Team and folder selector](https://help.touchify.io/1-getting-started/2-create-project/fr-creer-equipes-dossier.webp)

Once these parameters are defined, click on the **"Create project"** button.

::note
Your choices are not irreversible. They can be modified in the project page or in its settings.
::

## Congratulations, your project has been created!

Touchify Studio has opened in a new window. The Studio creation interface will allow you to integrate content and customize the operation of your project.


# Touchify Studio Interface

This creation interface includes many tools, panels and options allowing you to bring your content to life.

![Touchify Studio Interface](https://help.touchify.io/1-getting-started/3-studio-ui/fr-studio-interface.webp)

::steps{level="4"}
#### Insertion

The left sidebar allows you to insert all types of elements: text, image, video... Import documents from your device or discover elements built by Touchify.

#### Pages Panel

This is the panel containing the tree structure of your project. This is where you can create, view or organize your different pages.

#### Elements Panel

The elements that make up your page are classified in this panel. You can modify their positioning (background, foreground...), lock them and hide them using the buttons arranged on the right of the panel.

#### Preview and Publication

The preview presents the project in operating situation: use it to test the interactions and animations applied to your elements.
To share your project, use the publication button. This function allows you to generate links, as well as import the project into the Touchify Player application.

#### Editing Panel

The panel and the right sidebar are entirely dedicated to customization. You will find there the characteristics of your texts, your images and even of the global page.

:nuxt-img{alt="Editing panel tabs" src="https://help.touchify.io/1-getting-started/3-studio-ui/fr-studio-edition-onglets.webp" width="300"}

#### Zoom and Guides

Use the buttons in the bottom menu to zoom in, zoom out or apply guides on the work area. Generate an image of your page using the capture button.
::


# Create Interactive Content

::note
Prerequisites: 

**create a project**

:br


This article covers content creation. To learn how to create the base of your project, 

[read the previous article](https://help.touchify.io/2.create-project)

.
::

## Create a Page

Click on the **"Add a page"** button in the pages panel, on the left of the interface.
Still in the panel, rename this page by double-clicking on it or by performing **right click** > **"Rename"**.

::div{.grid.sm:grid-cols-2.gap-4.max-w-full}
![Create a page](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-bouton-page.webp)
![Rename a page](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-renommer.webp)
::

To modify the position of a page in the tree structure, **hold down a left click and drag the page** to the desired location. A blue highlight will indicate where your page will be dropped.

:nuxt-img{alt="Moving a page" provider="none" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-deplacer-page.webp" width="350"}

To create a category, click on the "Create a category" button. This function allows you to classify your pages according to a folder logic.

## Add an Element

**Text:** select the **"Text"** button in the insertion menu, on the left of the interface. Choose one of the predefined styles or click in the work area to create a neutral text block.

**Shape:** select the **"Shape"** button in the insertion menu, then choose a shape from the proposed list.

**Image:** select the **"Image"** button in the insertion menu, then click on the image you want to add.

:nuxt-img{alt="Create text" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-creer-texte.webp" width="500"}

::note
To add your documents to the project gallery, press the "Import" button or drag and drop your files into the dedicated window.
::

:nuxt-img{alt="Import an image" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-importer-image.webp" width="500"}

## Customize the Element

The right panel is entirely dedicated to customization. You will find there color, size, position or typographic treatment options for texts.

Click on the element so that the panel displays its options.

![Selection of an element](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-select-element.webp)

## Modify the Element

Click on this new block and use the white dots to modify the size of the element.

Click on the **"Edit"** button (pencil icon) to change the content of the block.

Click on the orange **"Interaction"** button to add an interaction to the element.

:nuxt-img{alt="Modifying an element" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-modifier-element.webp" width="500"}

## Add Interactions

Each element can become interactive.

Choose an element then click on the orange **"Interaction"** button, or on the identical button in the right sidebar.
Click on the **"Apply an interaction"** button to unfold the options list and select the interaction type of your choice.

:nuxt-img{alt="Adding an interaction" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-interaction.webp" width="350"}

The modification or deletion of this interaction will be done in the same window.

Note that it is possible to apply several different interactions on the same element (navigation, window, manipulation...) and to choose the trigger for each of them.

## Preview

Click on the **"Preview"** button to launch the preview. You will be able to test your project, its interactions, its ergonomics, and visualize the transitions or animations applied to your elements.

To exit preview mode, click on the cross at the top left of the console.

![Content preview](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-previsualisation.webp)


# Create Digital Signage content

::note
Prerequisites: 

**create a project**

:br


This article covers content creation. To learn how to create the base of your project, 

[read the previous article](https://help.touchify.io/2.create-project)

.
::

## Activation

If, when creating your project, you chose the Digital Signage type, your presentation will automatically open on the Playlist tab.

If, when creating your project, you chose the Interactive Display type, your presentation will automatically open on the Design tab. The Playlist tab is right next to it, in the Studio's top menu.

:nuxt-img{alt="Playlist tab" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-onglet.webp" width="500"}

Select this tab: an activation panel will be presented to you, in order to adjust the general settings of your display.
Choose the inactivity delay, the action launched at the end of it as well as the options related to your previous choices, then click on the "Validate" button.

![Playlist settings](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-parametres.webp)

If you want to change your project type to optimize it, click on the **Settings** > **Project** tab then select the type of your choice.

![Project type](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-type-projet.webp)

## Create a Playlist

An empty playlist is created by default. You can use it directly or create a new one.

To create a new playlist, click on the **"Playlist"** button at the top of the left sidebar. In the new Playlist panel, press the **"Add a playlist"** button.

:nuxt-img{alt="Create a playlist" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-creer.webp" width="450"}:br:nuxt-img{alt="Add a playlist" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-ajouter.webp" width="450"}

Once your playlist is created, select in the left menu the type of content you want to add to it: image, video, document, page...

If you integrate a page, you can modify it in the **Design tab**. An **"Open in Design"** button is provided for this purpose, at the bottom of the work area.

::div{.grid.sm:grid-cols-3.gap-4.max-w-full}
![Add an element](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-ajouter-element.webp)
![Open in Design](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-ouvrir-design.webp){.sm:col-span-2}
::

## Configuration

Customize the display settings in the right panel: duration, destination page in case of interaction, transitions...

:nuxt-img{alt="Editing panel" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-panneau-edition.webp" width="350"}

The right sidebar allows access to three different sections:

- The Element Options section, to modify the selected playlist element
- The Element Transition section, to adjust transition animations
- The Playlist Options section, allowing you to customize the previous settings globally

::note
To modify the global inactivity conditions, return to the playlists panel level and click on the 

**"Inactivity Settings"**

 button.
::


# Publish and Broadcast

## Publication

### Via Studio

Click on the orange **"Publish"** button in the studio's top menu, next to the **"Preview"** button.
Wait until the end of the loading: a notification will appear to announce the publication.

![Publish button](https://help.touchify.io/1-getting-started/6-publish/fr-publier-bouton.webp)

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Publication in progress](https://help.touchify.io/1-getting-started/6-publish/fr-publier-chargement.webp)
![Publication successful](https://help.touchify.io/1-getting-started/6-publish/fr-publier-succes.webp)
::

### Via Project Page

From the main **"My Projects"** page, click on the title of the presentation you want to publish then select the orange **"Publish"** button.

You will receive a notification when the loading is finished.

![Publish from project page](https://help.touchify.io/1-getting-started/6-publish/fr-publier-page-projet.webp)

### Web Sharing

The project can be shared as a private link. Click on the **"Sharing"** tab in the project page then click on the "Create a private URL" button

Copy the presented link to share it.

![Sharing tab in project page](https://help.touchify.io/1-getting-started/6-publish/fr-publier-partage.webp)

![Create private URL button](https://help.touchify.io/1-getting-started/6-publish/fr-publier-creer-url-privee.webp)

## Touchify Player

The Touchify Player application allows you to display Touchify content on a computer. It is compatible with major operating systems (Windows, Linux, Android, iOS...).

Two authentication modes are available:

- **User account:** personal computer, tablet or phone
- **Deployment key:** secure autonomous screen controlled with Touchify Publisher

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Connecting to Touchify Player using user account](https://help.touchify.io/1-getting-started/6-publish/fr-publier-player-utilisateur.webp)
![Connecting to Touchify Player using a deployment key](https://help.touchify.io/1-getting-started/6-publish/fr-publier-player-cle.webp)
::

![Home page in Touchify Player](https://help.touchify.io/1-getting-started/6-publish/fr-publier-player-home.webp)

::note
Download the application on the dedicated page 

["Download Touchify Player"](https://get.touchify.io){rel="nofollow"}

. 

:br


For more information, consult the 

[installation guides](https://help.touchify.io/en/touchify-player/installation/introduction)

 or 

[contact support](https://www.touchify.io/en/support){rel="nofollow"}

.
::


# Introduction

## The Main Elements

::card-group
  :::card
  ---
  icon: i-lucide-case-sensitive
  title: Texts
  to: https://help.touchify.io/en/touchify-studio/elements/texts
  ---
  Add text and customize fonts and characters.
  :::

  :::card
  ---
  icon: i-lucide-image-play
  title: Files and Media
  to: https://help.touchify.io/en/touchify-studio/elements/media
  ---
  How to insert images and other media in Touchify.
  :::

  :::card
  ---
  icon: i-lucide-square-dashed-top-solid
  title: Background and Borders
  to: https://help.touchify.io/en/touchify-studio/elements/background-and-borders
  ---
  Customize your elements using box styles.
  :::

  :::card
  ---
  icon: i-lucide-sparkle
  title: Shapes
  to: https://help.touchify.io/en/touchify-studio/elements/drawing
  ---
  Draw shapes in your Touchify content.
  :::
::

## Interactions

::card-group
  :::card
  ---
  icon: i-lucide-fingerprint
  title: Introduction to Interactions
  to: https://help.touchify.io/en/touchify-studio/interactions/introduction
  ---
  What are interactions and what are they for?
  :::

  :::card
  ---
  icon: i-lucide-navigation
  title: Navigation
  to: https://help.touchify.io/en/touchify-studio/interactions/navigation
  ---
  Add navigation to your Touchify content.
  :::

  :::card
  ---
  icon: i-lucide-fullscreen
  title: Manipulation
  to: https://help.touchify.io/en/touchify-studio/interactions/manipulation
  ---
  Bring your elements to life by manipulating them with your fingers.
  :::

  :::card
  ---
  icon: i-lucide-message-square-text
  title: Windows
  to: https://help.touchify.io/en/touchify-studio/interactions/dialogs
  ---
  Create contextual windows in your Touchify content.
  :::
::

## Animations

::card-group
  :::card
  ---
  icon: i-lucide-bring-to-front
  title: Introduction to Animations
  to: https://help.touchify.io/en/touchify-studio/animations/introduction
  ---
  How to bring your content to life using animations?
  :::

  :::card
  ---
  icon: i-lucide-columns-3-cog
  title: Customize an Animation
  to: https://help.touchify.io/en/touchify-studio/animations/customize
  ---
  Create fluid and relevant animations by customizing the options.
  :::

  :::card
  ---
  icon: i-lucide-clipboard-clock
  title: Storyboards
  to: https://help.touchify.io/en/touchify-studio/animations/storyboards
  ---
  Learn to control storyboards to create different animation scenarios.
  :::
::


# Texts

## Insert Text

First, click on the **"Insert text"** button *(T icon)* in the insertion menu, on the left of the interface. A window offering different text styles will open.

### Method 1: *click*

Click on the text style you want to add: a new block will appear at the top left of your page. **"Text"** will be written there as a marker.

:nuxt-img{alt="Insert text by clicking" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-inserer-click.webp"}

### Method 2: *draw*

Hold down the left click and draw your block anywhere on the page. Type your text as soon as the box appears: any empty text block is deleted once deselected.

:nuxt-img{alt="Insert text by drawing" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-inserer-draw.webp"}

### Method 3: *drag & drop*

Drag and drop the style of your choice into your page: a new block will appear where you release the click. "Text" will be written there as a marker.

:nuxt-img{alt="Insert text by drag & drop" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-inserer-dragdrop.webp"}

::caution
**Reminder:**

 any empty text block is deleted once deselected.
::

## Customize Text

To format your text, select the element to display the **"Element customization"** options *(crosshair icon)* from the right sidebar.
The editing panel will show the customization options.

### Editing and Formatting

::u-page-card
---
orientation: horizontal
reverse: "true"
variant: naked
---
![Text editing panel](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-panneau-edition.webp)

#description
1. Edit the text in the Edit panel *(or by double-clicking on the text block)*
2. Modify the typography, size and color of the characters
3. Apply bold, italic, underline, highlight...
4. Master the justification of your text
::

::note
To add your typography, click on the fonts dropdown button and press the 

[+]

 

**"Add"**

 button, at the top right of the window.


:br

:br


You can also import your fonts in the 

**"My Brand"**

 section of your profile.
::

### Editing panels or block editing? What's the difference?

There are two ways to customize your text.

**Via the editing panel:** this method, mentioned above, allows you to modify a text element as a whole. All characters in the selected block will be modified.

**Via block editing:** when you edit the content of your text element, a customization banner appears. It does not affect the entire block but only the characters you have selected.
This method allows, for example, to apply a color and boldness to important words.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Toolbar in block editing](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-toolbar.webp)
![Modifying part of a text](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-toolbar-edit.webp)
::

### Advanced Options

Modify more advanced settings in the **"Advanced Options"** subsection of the **"Formatting"** panel:

::u-page-card
---
orientation: horizontal
reverse: "true"
variant: naked
---
![Advanced editing panel](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-panneau-edition-avance.webp)

#description
1. Modify the space between letters to aerate or condense the paragraph
2. Control the space between lines
3. Apply an indent-type offset at the beginning of the paragraph
4. If your text overflows the block, allow the user to scroll the text
5. Separate the same text element into multiple columns
6. Mark characters with a drop shadow
::

### Paragraph Style

This subsection contains paragraph settings: they are **complementary to text formatting while being autonomous**.
For example, you can modify the space between paragraphs independently of the space between lines.

:nuxt-img{.w-full.bg-[white] alt="Examples of paragraph styles" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-paragraphes-exemples.webp"}

Several tools are available to customize your paragraphs:

:nuxt-img{alt="Editing paragraph styles" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-paragraphes-edition.webp" width="450"}

1. Choose a background color
2. Apply an outline
3. Round the corners of the paragraph area
4. Add a drop shadow
5. Set an internal margin
6. Manage external margins

## Background and Borders

Beyond textual content, the block itself is customizable. The **"Background and borders"** panel contains different options.

:nuxt-img{alt="Editing box styles" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-boite.webp" width="350"}

1. Apply a background color
2. Add an outline on the border(s) of your choice
3. Round the corner(s) of your choice
4. Generate a drop shadow
5. Set an internal margin

::note
This functionality modifies the element as such. Therefore, it exists for all types of elements: image, video, document, menu, window...


[Go to the dedicated article to better understand backgrounds.](https://help.touchify.io/en/touchify-player/elements/background-and-borders)
::

::caution
**Reminder:**

 the margins, backgrounds and outlines described here are not the same as those in the 

**"Paragraph Style"**

 subsection
::

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full.bg-[white]}
![Comparison of paragraph styles and box styles](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-vs-paragraphes.webp)
![Comparison of box styles and paragraph styles](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-vs-boites.webp)
::

## Styles

To facilitate the customization of your texts, use the **Styles** functionality: save your customization and apply it with one click on your new elements.

::note
The following functionalities are illustrated by text styles, but note that box and window styles work the same way.
You can use these tips on 

**all types of styles**

.
::

### Apply a Style

In the **"Formatting"** panel, click on the **"Style"** button: choose a text style from the proposed list. Your element will adopt the formatting of the selected style.

![Selecting a text style](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-select.webp)

### Save a Style

You have just customized a text and want to keep this style in memory.

Click on the **"Add a style"** button to the right of the **"Style"** dropdown button and note the name you want to assign to this new style. It will automatically apply to your selected element.

:nuxt-img{alt="Add a text style" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-ajouter.webp" width="350"}

### Go Further

You have modified an element and want to save these modifications in the applied style.

Select the element, then click on the **"Save"** button next to the **"Style"** dropdown button. The modifications will be automatically taken into account by all other elements bearing this style.

:nuxt-img{alt="Save a text style" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-enregistrer.webp" width="350"}

You can also modify your styles from the **"Style"** tab, in the Studio's top menu.

:nuxt-img{alt="Styles tab" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-onglet.webp" width="450"}

Customize all your texts by modifying the **Default Style**: it defines the parameters of texts that do not have a style applied. It also serves as a base for all other styles.

![Default style](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-defaut.webp)

Styles are classified by categories. Look for the category of the style you want to modify in the left panel, then **select it to customize** it at the root.

The modifications will be taken into account by all other elements bearing this style.

:nuxt-img{alt="Style categories" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-categories.webp" width="350"}


# Files and Media

## Import and Insert

### Import

Touchify Studio is an interface that allows you to create your content from your own resources: texts, images, videos, documents...
You must therefore import these resources into the Studio before you can format them.

The file explorer stores and classifies your media.
You can drop four different types of files there: **image, video, audio, PDF...**
Unfold the left menu by clicking on the orange [+] **"Insert"**, go to the space corresponding to the file you want to add then click on the orange **"Import"** button.
You can also use the **drag & drop** technique.

![Media import](https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-import.webp)

### Insert

Once your resource is saved in the Studio, insert it into your page.

#### Method 1: *click*

Select the resource you want to add then click on the orange [+] **"Add"**: the file will appear at scale, at the top left of your page.

:nuxt-img{alt="Insert media by clicking" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-click.webp"}

#### Method 2: *drag & drop*

From the explorer, drag and drop the resource of your choice into your page: it will appear at scale, where you release the click.

:nuxt-img{alt="Insert media by dragging and dropping" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-dragdrop.webp"}

#### Method 3: *multiple selection*

It is possible to insert multiple files at once.

In the explorer, click on the **"Multiple selection"** button *(check icon)* then select the files of your choice.
Click on the [+] **"Add"** button at the top right of the window, or use the **drag & drop** technique to insert everything into the page.

:nuxt-img{alt="Multiple media selection" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-multi.webp" width="450"}

::note
**Tip:**

:br


Use your keyboard to select multiple files at once.
Select the resources you want to insert by holding the 

**Shift (A > B)**

 or 

**Ctrl (A+B)**

 key.
::

:nuxt-img{alt="Insert multiple media by dragging and dropping" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-multi-kbd.webp"}

## Features

### Classify

To create a folder in the explorer, click on the **"Create a folder"** button *(folder icon)* at the top of the window.
The folder will be generated in the section (image, video..) where you are.

:nuxt-img{alt="Multiple media selection" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-creer-dossier.webp" width="450"}

To modify the preview of your files, click on one of the icons at the bottom right of the window: select the **grid** or **list** display according to your preference.

To find a specific file, use the **search bar** at the top right of the window: type the name of the resource you are looking for.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![View media in list view](https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-vue-liste.webp)
![Search media](https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-rechercher.webp)
::

### Modify

To rename a file in the explorer, **simply select its title**: when the text cursor appears, write the new one. Press the **Enter key** to validate.

To delete a file, select it in the explorer then click on the **"Delete"** button *(trash icon)*.

To display file details (type, size, import date...), select it then click on the **"Details"** button *(three dots)*.

:nuxt-img{alt="Media selection" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-selection.webp" width="450"}:br:nuxt-img{alt="Media details" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-details.webp" width="450"}

### Move

To modify the location of a file or folder, use the **drag & drop** method: hold down the left click then drag your resource to the location of your choice.

:nuxt-img{alt="Moving media by dragging" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-deplacement.webp"}

## Account files and project files: what's the difference?

Two types of galleries are offered to you in the Studio: account files and project files. Although they are accessible from the same place, these explorers are different.

:nuxt-img{alt="Media sources" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-sources.webp" width="300"}:br

#### Account files:

The resources you import there are linked to your Touchify account. They will be available in all your projects.

#### Project files:

The resources you import there are linked to the project. They are exclusive to it and will not be visible in your other projects, unless you look for them in the "Other projects" gallery.

#### Other projects:

This gallery groups together resources imported in all your projects. You can find files available in all "Project files" galleries there.

#### Logos:

Import your logos and brand images in the "My brand" profile section. They will appear in all your projects.


# Background and Borders

## Panel Description

Like all panels arranged on the right side of the interface, **"Background and borders"** contains a set of tools for customizing the selected element.

:nuxt-img{alt="Background and borders section" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-section.webp" width="450"}

1. Apply a background color
2. Add an outline on the border(s) of your choice
3. Round the corner(s) of your choice
4. Generate a drop shadow
5. Set internal margins

## Background

Modify your element's background by selecting the **"Background"** icon (1). Click on the color dot to choose a new shade, then adjust the opacity with the slider.

:nuxt-img{alt="Configure page background" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background.webp"}

::tip
Do you want to 

**save the color you just created?**

:br


Click the 

**"Add"**

 button in the colors window, below the palette. Enter the name of your new color and validate.
::

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Add a color to the palette](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background-ajouter.webp)
![Name a color in the palette](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background-ajouter-nommer.webp)
::

## Masks

An element's shape can be modified using a mask.

In the **"Background"** subsection, click on the **"Add a mask"** option and select the shape you want to give to your element.

::div{.mt-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![List of shapes usable for masks](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-mask-formes.webp)
![Configure a mask for an element](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-mask-config.webp){.sm:col-span-2 provider="none"}
::

Customize the mask settings in the same subsection.

To change shape, delete the current mask by clicking the **"Delete mask"** button *(trash icon)* then create a new one in the same way.

::note
Transform your outline into a mask using the 

**"Apply mask to border"**

 switch available in the 

**"Border"**

 tab.
Apply a mask in 

**"Background"**

 first to use this function.
::

## Borders

To add an outline to your element, click the **"Borders"** button (2). Choose a line thickness and color; you can also apply a line type like dots, dashes...

:nuxt-img{alt="Border styles" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-style.webp" width="400"}

Treat your borders case-by-case by unlocking them. Click the **"Unlock"** icon (padlock) to display borders independently. Modify them according to your needs.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Separate border configuration](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-separes.webp)
![Example of separate border configuration](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-separes-exemple.webp){.sm:self-end}
::

## Rounded Corners

To modify the rounded corners of your element, click the **"Rounded corners"** button (3). Choose the desired rounding intensity.

:nuxt-img{alt="Rounded corners configuration" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-radius-config.webp" width="400"}

Treat your element's corners case-by-case by unlocking them. Click the **"Unlock"** icon (padlock) to modify angles independently.

![Separate rounded corners configuration](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-radius-separes.webp)

## Drop Shadow

To add a drop shadow to your element, select the **"Shadow"** button (4). Click the **"Add"** icon then adjust the shadow settings to your liking.

:nuxt-img{alt="Drop shadow configuration" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-shadow-config.webp" width="400"}

- The color/opacity bar works the **same way as for background color**
- ΔX and ΔY define the **shadow offset** on the X and Y axes
- Blur **modifies the shadow diffusion**; spread **affects its intensity**
- The shadow is, by default, outside the element; it can be applied inside using the **"Inner shadow"** function.

![Drop shadow and inner shadow](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-shadow-interieur.webp)

## Internal Margins

To apply internal margins to your element, click the **"Internal margins"** button (5). Choose the size of your margins in pixels.

Click the **"Unlock"** icon (padlock) to modify margins independently.

:nuxt-img{alt="Example of internal margin application" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-padding-exemple.webp" width="550"}

::note
**Reminder:**

:br

:br


You can reproduce your customization using styles. Click the 

**"Add a style"**

 button next to the 

**"Style"**

 dropdown button to save the formatting: apply this style to other elements to modify them with one click.


:br

:br


For more details, take a look at the 

[Text customization](https://help.touchify.io/texts#styles)

 article, 

**"Styles"**

 section.
::


# Shapes

## Draw

Click on the "Insert a shape" button in the insertion menu on the left of the interface.
A window containing the list of available shapes will open.

:nuxt-img{alt="Shape insertion panel" src="https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-panneau.webp" width="500"}

### Method 1: *drag & drop*

Drag and drop the shape of your choice into your page: it will appear where you release the click.

:nuxt-img{alt="Inserting a shape into the page" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-insertion-click.webp"}

### Method 2: draw

Select the shape of your choice, then hold down the left click and draw a block anywhere on the page. A shape with the dimensions of the block will appear when you release the click.

:nuxt-img{alt="Inserting a shape into the page by drawing" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-insertion-draw.webp"}

## Customize

### Color and Outline

Click on your element then on the **"Element customization"** button in the menu on the right of the interface. Customize the background and border color in the **"Color and outline"** panel.

![Customizing the outline of a shape](https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-contour.webp)

Click on the color dots to modify the hue; drag the slider to **adjust opacity**.

Modify the outline size and corner rounding according to your needs.

::caution
Customization of imported elements (text, image...) allows you to modify different outlines and angles independently.
Shapes do not have this functionality: 

**outlines and angles cannot be separated**

.
::

### Angle and Orientation (optional)

Some shapes can be customized in detail: number of branches for a star, degree of inclination for a trapezoid...
These parameters can be modified in the **"Customize"** panel, just above **"Color and outline"**.

![Customizing a trapezoid](https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-config-trapeze.webp)

![Customizing a star](https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-config-etoile.webp)


# Introduction

## Apply an Interaction

Select your element then click the **"Element interactions"** button *(touch icon)* in the right sidebar. Click the **"Add an interaction"** button.

In the proposed list, choose the action that this element will trigger when the user interacts with it.

:nuxt-img{alt="Interaction insertion panel" src="https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-panneau.webp" width="350"}

A settings tab will be created for each added interaction.

Indeed, it is possible to apply multiple interactions to the same element: to avoid conflicts, make sure to choose a different **trigger** for each of them.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Interactions panel with a single interaction](https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-panneau-unique.webp)
![Interactions panel with multiple interactions](https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-panneau-multiple.webp)
::

## Triggers

The trigger determines how the user can interact with the object.

Select the interaction then click on the **"Trigger"** panel: unfold the button and choose from the proposed options.

:nuxt-img{alt="Interaction triggers" src="https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-declencheurs.webp" width="350"}

- **Touch:** touch (or click) to activate
- **Double touch:** touch twice (or double-click) to activate
- **Multiple touch:** choose the number of touches (or clicks) needed to activate the action
- **Long press:** hold a touch (or click) to activate
- **Swipe (touch screens only):** swipe the screen in the direction of your choice to trigger the action
- **Keyboard or remote:** connect the buttons of a peripheral (keyboard, remote...) to the trigger

::note
Although this article takes element interactions as an example, it is possible to make the entire page interactive.


:br

:br


Click the 

**"Page interactions"**

 button 

*(touch/page icon)*

 in the right sidebar.
The same functionalities will be offered to you, with the difference that the 

**triggers will be applied to the entire page and not to a targeted element**

.
::


# Navigation

## Apply an Interaction

To add navigation to an element, select it then click on the **"Element interactions"** button *(touch icon)* in the right sidebar of the interface. Choose the **"Navigation"** interaction.

To add navigation to the page, click on the **"Page interactions"** button *(touch/page icon)* in the right sidebar of the interface. Choose the **"Navigation"** interaction.

::note
To learn more about interactions, 

[go to the dedicated article](https://help.touchify.io/introduction)

.
::

## Navigation Options

The **"Navigate to"** tab allows you to choose the destination page.

:nuxt-img{alt="List of your content pages" src="https://help.touchify.io/2-touchify-studio/3-interactions/2-navigation/fr-studio-navigation-pages.webp" width="300"}

- **Pages:** target a page from the tree structure
- **Special pages:** target a level or section of your tree structure. For example, this option can be useful if you want to create "Next page" and "Previous page" buttons.


# Manipulation

## Introduction

The **Manipulation** interaction allows multipoint tactile manipulation: it includes moving, zooming and rotating elements.

It can be applied to **any interactive element**: photo, text, shape, video...

::note
The number of simultaneous contact points on one or more elements depends on the number of points supported by the hardware used.
::

## Simple Manipulation

To add a **"Manipulation"** interaction to an element, select it then click on the **"Element interactions"** button *(touch icon)* in the right sidebar of the interface.
Choose the interaction from the proposed list.

:nuxt-img{alt="Inserting a Manipulation interaction" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-insertion.webp" width="300"}

As soon as the interaction is added, the element can be manipulated. View the default parameters by clicking on the **"Preview"** button at the top right of the interface.
The preview window appears: it allows you to test your project in real situation.

:nuxt-img{.w-full alt="Demonstration of Manipulation interaction" provider="none" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-demo.webp"}

## General Options

:nuxt-img{alt="Manipulation interaction options" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-options.webp" width="350"}

All manipulation parameters can be customized in detail:

- **Translation** designates the manipulation of the element from left to right and bottom to top. By disabling translation, the element cannot be moved in the page. You can also choose to block this function on the X axis (horizontal) or on the Y axis (vertical) only.
- **Zoom** allows enlarging or shrinking the element. Control the maximum and minimum size of the object by modifying the proposed values. Disable this option by clicking on the switch.
- **Rotation** is not a customizable option, but it can be disabled like the others.

:nuxt-img{.w-full alt="Demonstration of Manipulation interaction" provider="none" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-demo2.webp"}

## Slowdown Options

:nuxt-img{alt="Movement continuation option" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-slowdown.webp" width="300"}

When released, a manipulable element can continue its movement for a few moments.
This slowdown option is customizable in the **advanced options window**, below the translation options.

::div{.mt-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![Manipulation with light slowdown](https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-slowdown-leger.webp){.sm:col-span-2 provider="none"}


≫ Light slowdown

![Manipulation with strong slowdown](https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-slowdown-fort.webp){.sm:col-span-2 provider="none"}


≫ Very strong slowdown
::

## Inner Manipulation Options

Each element consists of a resource displayed in a block. In this sense, it is possible to apply manipulation to the resource only:
activate the **"Manipulate element interior"** function so that the resource is manipulable independently of the block.

:nuxt-img{alt="Inner Manipulation options" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-interieure.webp" width="350"}

By using this option, you can control the size and initial position of the internal resource. The element itself will not be modified, only its appearance and interactivity.

:nuxt-img{.w-full alt="Demonstration of inner Manipulation interaction" provider="none" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-interieure-demo.webp"}


# Windows

## Apply an interaction

To add a "window" interaction, select your element then click the **"Element interactions"** button *(touch icon)* in the right sidebar of the interface.
Choose the **"Text window"**, **"Web window"** or **"Custom window"** interaction.

To add a window to the page, click the **"Page interactions"** button *(touch / page icon)* in the right sidebar of the interface.
Choose the **"Text window"**, **"Web window"** or **"Custom window"** interaction.

## Text window

Create a text window that appears after an interaction. Many customization options are available to you, but **most of them rely on common Studio features**.

:nuxt-img{alt="Text Window interaction options" src="https://help.touchify.io/2-touchify-studio/3-interactions/4-dialogs/fr-studio-dialogs-text-panneau.webp" width="350"}

- **Trigger:** Choose how the window will be activated (to learn more about triggers, go to [the article dedicated to interactions](https://help.touchify.io/introduction#triggers))
- **Window content:** insert the text you want to display in the window
- **Dimensions:** define the window size
- **Position:** choose the window position on the page
- **Closing options:** choose which action will close the window
- **Text customization:** format your text (to learn more, go to [the article dedicated to text customization](https://help.touchify.io/../elements/texts))
- **Window customization:** modify your window style (to learn more, go to [the article dedicated to background and borders](https://help.touchify.io/../elements/background-and-borders))

## Web window

Create a window containing a web page. Define access, dimensions, style...

:nuxt-img{alt="Web Window interaction options" src="https://help.touchify.io/2-touchify-studio/3-interactions/4-dialogs/fr-studio-dialogs-web-panneau.webp" width="350"}

- **Trigger:** Choose how the window will be activated (to learn more about triggers, go to [the article dedicated to interactions](https://help.touchify.io/introduction#triggers))
- **Website URL:** insert the link to the page you want to display in the window
- **Security:** modify the access options to your page
- **Dimensions:** define the window size
- **Position:** choose the window position on the page
- **Closing options:** choose which action will close the window
- **Window customization:** modify your window style (to learn more, go to [the article dedicated to background and borders](https://help.touchify.io/../elements/background-and-borders))

## Custom window

Create a custom window from a component.

::caution
**Reminder:**

 create your component before integrating it into a window.
::

:nuxt-img{alt="Custom Window interaction options" src="https://help.touchify.io/2-touchify-studio/3-interactions/4-dialogs/fr-studio-dialogs-custom-panneau.webp" width="350"}

- **Trigger:** Choose how the window will be activated (to learn more about triggers, go to [the article dedicated to interactions](https://help.touchify.io/introduction#triggers))
- **Component:** choose the component that will display in the window
- **Properties:** if the widget has properties, modify them to customize it
- **Dimensions:** define the window size
- **Position:** choose the window position on the page
- **Closing options:** choose which action will close the window
- **Window customization:** modify your window style (to learn more, go to [the article dedicated to background and borders](https://help.touchify.io/../elements/background-and-borders))


# Introduction

## Element Animation

To animate an element, select it then click the **"Animation"** button *(bounce icon)* in the right sidebar.
The panel will open on the **animations list**: select the one you want to apply to the element then modify its settings (duration, speed curve...) in the new **Element animations** panel.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![List of available animations](https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-liste.webp)
![Animations panel with a selected animation](https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-intro.webp)
::

::caution
**Caution:**

 you can apply multiple animations to the same element, but some conflicts may appear if the animations trigger at the same time.


**Offset their timer**

 

*(clock icon)*

 to avoid display bugs.
::

## Animation Type

Animations are separated into four families. Each corresponds to a type of use described below.

::note
The Opacity animation has been chosen to illustrate this article; you can choose other animations in your project.
::

### Entrance

These animations are designed for the appearance of elements, when the page opens.

:nuxt-img{.w-full alt="Demonstration of Entrance type animation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-apparition.webp"}

### Exit

In parallel with the "Entrance" section, this list concerns exit animations.

:nuxt-img{.w-full alt="Demonstration of Exit type animation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-disparition.webp"}

### Transform

These animations modify the position, size or transparency of the element over the long term.

:nuxt-img{.w-full alt="Demonstration of Transform type animation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-transformation.webp"}

### Call to Action

These animations are designed as loops, so they can be repeated to attract the user's attention.

:nuxt-img{.w-full alt="Demonstration of Call to Action type animation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-cta.webp"}

## Page Transitions

Apply page animations to smooth navigation.

Click the **"Page transitions"** button *(page/bounce icon)* in the right sidebar.
Choose the animations of your choice: page entrance and exit are independent.

*Since the panels are already classified by animation type, you will not find the four families offered for element animations.*

:nuxt-img{alt="Page transitions" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-transitions.webp" width="350"}


# Customize an animation

::note
**Prerequisites:**

 apply an animation to your element or page. To learn more, see 

[introduction to animations](https://help.touchify.io/introduction)
::

## Timing

Define the **appearance time** *(clock icon)* and the **duration of your animation** *(stopwatch icon)*. Modify the **speed curve** to adjust your element's movement.

::div{.my-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![Setting animation timing](https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-temps.webp)
![Setting animation speed curve](https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-courbe.webp){.sm:col-span-2}
::

:nuxt-img{.w-full alt="Animation speed curve demonstration" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-courbe-demo.webp"}

::caution
**Warning:**

 you can apply multiple animations to the same element, but conflicts may appear if animations trigger at the same time.


**Offset their timer**

 

*(clock icon)*

 to avoid display bugs.
::

## Effects

:nuxt-img{alt="Animation effects options" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-effets.webp" width="350"}

### Zoom and fade

Refine your animation appearance by activating zoom and/or fade effects: they will complement the animation style without modifying other parameters.

:nuxt-img{.w-full alt="Demonstration of zoom and fade effects in animation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-effets-zoom-demo.webp"}

### Repeat animation

Apply a repetition effect: control the number of repeats and the duration between each repetition.

:nuxt-img{alt="Animation repetition options" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-repetition.webp" width="350"}

### Special options

Some options are specific to an animation. The parameters are then specified in the window. Modify them according to your needs.

:nuxt-img{.w-full.bg-[white] alt="Special animation options" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-speciales.webp"}

### Initialization

By default, an element is invisible before its appearance animation is triggered.

To cancel this behavior, click the **"Do not hide on initialization"** option switch.


# Storyboards

## Create a storyboard

### Method 1: *via the footer*

Click on the **"Storyboard"** dropdown menu at the bottom left of the interface, in the footer.

Select the **"Add storyboard"** button: the parameters of this new storyboard will display, complete them then click the **"Back"** button (arrow) to validate.

:nuxt-img{alt="Adding a storyboard from the footer" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-ajout-footer.webp" width="500"}

### Method 2: *via the element*

Select your element and go to the **"Animations"** panel. Click on the **"Storyboard"** dropdown menu at the top of the window.

Select the **"Add storyboard"** button: the parameters of this new storyboard will display, complete them then click the **"Back"** button (arrow) to validate.

:nuxt-img{alt="Adding a storyboard from an element" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-ajout-element.webp" width="500"}

## Modify a storyboard

Select the **"Storyboard"** dropdown button (in the footer or in the animations panel) then click the **"Edit"** button (pencil icon) of the storyboard you want to modify.

:nuxt-img{alt="Modifying a storyboard" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-modifier.webp" width="500"}

### Execution

Choose to launch the storyboard on page display or page disappearance. This option is useful when you dedicate your storyboard to entrance animations or exit animations.

### Repeat & alternate

To repeat your storyboard, click the **"Repeat storyboard"** option switch: choose the number and frequency of repetitions.

To alternate your storyboard, click the **"Alternate storyboard"** option switch: at the end of its cycle, the storyboard will be rewound then replayed like a boomerang.

### Incoming elements

By default, an element is invisible before its appearance animation is triggered.
To cancel this behavior, click the **"Don't hide incoming elements"** option switch.

## Choose a storyboard

Each element animation is applied to a storyboard.

Select your element then click the **"Animations"** button to go to the element animations panel.
Select the storyboard of your choice in the **"Storyboard"** dropdown menu: the next animation you add to your element will be affiliated with this storyboard.
Animations already created in this storyboard will also be visible in the **"Element Animations"** panel.

:nuxt-img{alt="Selecting a storyboard" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-selection.webp" width="500"}

::caution
**Warning:**

 once the animation is applied, you cannot change its storyboard. Make sure you have selected the correct storyboard before adding an animation.
::


# Introduction

## Creating a digital signage project

::note
Touchify is accessible online from any browser. Make sure you are connected to the internet when you want to use it.
::

### Creating the project

Log in to your Touchify profile at touchify.app and select your account. You will land on the page dedicated to your projects.
If this is your first login, click the "Create my first project" button.

:nuxt-img{.w-full alt="Create my first project button" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-create-first-project.webp"}

If you already have access to multiple projects, click the "Create a new project" button located at the top right of the section.

:nuxt-img{.w-full alt="Create a new project button" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-create-new-project.webp"}

### Project type

Several settings need to be defined when creating a new project.
Three project types are suggested: select "Digital Signage" to optimize the features of your future playlists.

:nuxt-img{.w-full alt="Selecting the project type" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-project-type.webp"}

### Resolution

Your project format is fully customizable.
A wide list of dimensions is available, sorted by resolution or device type; if needed, enter your desired dimensions by clicking the "Customize" button on the right.

:nuxt-img{.w-full alt="Selecting the project resolution" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-project-resolution.webp"}

### Team

You can assign your project to a team.
The "Team" feature manages project accessibility: it will only be visible and editable by members of the selected team.

:nuxt-img{.w-full alt="Selecting the project team" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-project-team.webp"}

Once these settings are defined, click the "Create project" button.

::note
Your choices are not irreversible. They can be modified on the project page or in its settings.
::

**Congratulations, your project has been created!**

Touchify Studio has opened in a new window. The Playlist creation interface will allow you to integrate content and customize how your project works.

## Enabling playlists in an interactive project

If, when creating your project, you chose the Interactive Display type, your presentation will automatically open on the Design tab. The Playlist tab is right next to it, in the top menu of the Studio.

:nuxt-img{.w-full alt="Playlist tab in the Studio top menu" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-interactivity-and-inactivity.webp"}

Select this tab: an activation panel will be presented to set the general display settings. Choose the inactivity delay, the action triggered at the end of it, and the options related to your previous choices, then click the "Confirm" button.

:nuxt-img{.w-full alt="Activation panel and inactivity settings" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-enable-inactivity.webp"}

If you want to change your project type to optimize it, click the Settings > Project tab and select the type of your choice.

:nuxt-img{.w-full alt="Changing the project type in settings" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-change-project-type.webp"}

## Creating a playlist

An empty playlist is created by default. You can use it directly or create a new one.
To create a new playlist, click the "Playlist" button at the top of the left sidebar. In the new Playlist panel, press the "Add a playlist" button.

:nuxt-img{.w-full alt="Add a playlist button in the Playlists panel" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-create-a-playlist.webp"}

Once your playlist is created, select from the left menu the type of content you want to add: image, video, document, page, weather...
If you add a page, you can edit it in the Design tab. An "Open in Design" button is available for this purpose at the bottom of the workspace.

:nuxt-img{.w-full alt="Open in Design button at the bottom of the workspace" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-open-in-design.webp"}

### Configuration

Customize the display settings in the right panel: duration, destination page on interaction, transitions...

:nuxt-img{.w-full alt="Configuration panels in the right sidebar" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-configuration-panels.webp"}

The right sidebar gives access to three different sections:

- The Element Options section, to edit the selected playlist element
- The Element Transition section, to adjust transition animations
- The Playlist Options section, to customize the above settings globally

By default, the pages of your playlist play in list order. Reorder them using drag-and-drop, or enable shuffle mode in the playlist window on the right side of the interface, under the "Playlist Options" tab.

:nuxt-img{.w-full alt="Playlist options with shuffle mode enabled" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/en-playlists-playlist-configuration.webp"}

::note
In shuffle mode, elements are displayed once per cycle. Their order changes randomly, but all elements must appear once before a new cycle starts.
::

::note
To modify the global inactivity settings, go back to the playlists panel and click the "Inactivity Settings" button.
::


# Element display frequency

::note
Prerequisite: create a playlist. This article covers content creation. To learn how to set up the base of your project, read the previous article.
::

## Display cycles

A cycle ends when all elements in the playlist have been displayed: cycles follow one another automatically, in list order (or randomly if that option is enabled).

The display frequency of an element lets you choose whether it appears every cycle, or only occasionally (every X cycles, every X minutes…). To change this setting, select an element and click the "Frequency" option field in the first panel on the right side of the interface. Choose the cycle frequency or the duration before the element appears.

:nuxt-img{.w-full alt="Cycle frequency option" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/en-playlists-frequency-cycles.webp"}

### Example

At the entrance of my shopping mall, a screen plays a playlist of the latest news. I want to add a promotional page about the loyalty card, but I want it to appear only occasionally so the news takes priority.

Once I insert my loyalty page into my playlist, I set its display frequency to every two cycles: the sequence will be news 1, news 2, news 1, news 2, promo, then news 1, news 2 again…

:nuxt-img{.w-full alt="Cycle frequency example" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/en-playlists-frequency-cycles-example.webp"}

## Repetitions

Elements connected to external data, such as news feeds, can have a rotating display and change content on each occurrence. The repetition option allows you to chain several consecutive displays — with different content — from a single element.

To enable this setting, select an element and click the "Repetition" option field in the first panel on the right side of the interface. Choose the number of consecutive repetitions of this element within a single cycle.

:nuxt-img{.w-full alt="Element repetition option" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/en-playlists-repetition.webp"}

### Example

My welcome screen plays a playlist of the latest news. I want to add the weekly news summary, but I don't want to display all items on a single page for readability reasons.

In my playlist, I add a news element with "Alternating display": I choose to show six items at a time, meaning the first six items will appear in the first cycle, then the last six in the second cycle. I don't want to split the summary across two cycles, so I enable repetition on this element. This single element will therefore appear twice in a row — first with the first six items, then with the last six — before the playlist continues its cycle.

:nuxt-img{.w-full alt="Element repetition example" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/en-playlists-repetition-example.webp"}


# Element display conditions

Playlist elements can be configured individually. Their display can depend on certain conditions.

To add a condition to a playlist element, select it and expand the "Display Conditions" panel on the right side of the interface.

:nuxt-img{.w-full alt="Display Conditions panel on the right side" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/en-playlists-conditions.webp"}

Click "Add a condition" and choose from:

- **Display dates**, to define a duration or a recurring schedule
- **Groups and screens**, to choose which screens in your network can display this element

## Example: scheduling by date

I want to promote a summer sale. I'd like a promotional page to appear in my welcome screen's news feed, from June 24 to July 21.

In my playlist, I add this promotional page and apply a time condition to it:

:nuxt-img{.w-full alt="Example of a date-based display condition" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/en-playlists-conditions-example-time.webp"}

This way, my promotional page will automatically be added to my display on June 24, then stop appearing on July 21, without any manual action on my part.

## Example: scheduling by screen

I have two display screens in my shopping mall, both playing the same news playlist. I want to add a page showing directions to the elevators, but I can't show the same page on both screens since their position relative to the elevators is different.

In my playlist, I create two directional pages: one for screen A, and one for screen B. I add a condition to the "Screen A" page to include it on screen A, and a condition to the "Screen B" page for screen B.

:nuxt-img{.w-full alt="Example of a screen-based display condition" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/en-playlists-conditions-example-screens.webp"}

This way, each screen displays the correct signage while sharing the same news playlist.

:nuxt-img{.w-full alt="Illustration of screen-based display conditions" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/en-playlists-conditions-example-illustration.webp"}


# Nested playlists

## Nesting a playlist

A playlist can be embedded inside another playlist just like any other element.

Select your playlist, then click the "Apps" button in the insert menu. Under the "Other apps" section, click the "Playlist" button and choose the playlist you want to add.

:nuxt-img{.w-full alt="Adding a nested playlist via the Apps menu" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/en-playlists-nested-playlists.webp"}

### Example

I have two display screens in my shopping mall, each playing a different playlist. I want to add the same promotional pages to both displays.

I currently have two playlists in my project: one for screen A and one for screen B. I create a playlist C and add the promotional pages I want. Once done, I go into playlist A and insert a playlist element linked to playlist C; then I do the same for playlist B.

:nuxt-img{.w-full alt="Example of nested playlists" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/en-playlists-nested-playlists-example.webp"}

Now, screen A plays playlist A and playlist C. Screen B plays playlist B and playlist C.

:nuxt-img{.w-full alt="Illustration of nested playlists" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/en-playlists-nested-playlists-illustration.webp"}

## Nested playlist frequency

As an element, a nested playlist can have its own display frequency.

The display frequency lets you choose whether the element appears every cycle, or only occasionally (every X cycles, every X minutes…). To change this setting, select the element and click the "Frequency" option field in the first panel on the right side of the interface. Choose the cycle frequency or the duration before the element appears.

:nuxt-img{.w-full alt="Frequency option for a nested playlist" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/en-playlists-nested-playlist-frequency.webp"}

You can also choose whether the nested playlist plays in full or only partially.

Select the nested playlist element and find the "Show" field in the "Playlist" panel on the right side of the interface. Choose how many elements from the nested playlist you want to display per cycle.

:nuxt-img{.w-full alt="Choosing the number of items displayed from a nested playlist" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/en-playlists-nested-playlist-item-count.webp"}

::note
If you enable "Shuffle" mode in a playlist, it will always play in random order when nested.
::

### Example

I want to display photos from past events on my welcome kiosk, alongside the active playlist. I have far too many photos to show them all in sequence, but I'd like all of them to eventually be displayed.

In addition to my active playlist A, I create a second playlist B containing the 35 photos I want to show. I then go back to playlist A and nest playlist B into it: I select it and, in the "Show" field of the "Playlist" panel, I choose to display only 5 elements at a time. This way, each cycle will show 5 photos from playlist B after playlist A.

:nuxt-img{.w-full alt="Illustration of the item count for a nested playlist" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/en-playlists-nested-playlists-illustration-2.webp"}

::note
I can enable "Shuffle" mode in playlist B so that the photos, still shown 5 at a time, are chosen randomly.
::


# Scheduling playlists

## Schedule

To schedule your playlist, start by creating a new schedule.

At the top left of the interface, next to the "Playlist" tab where you built your project, click the "Schedule" tab. Click the "New schedule" button to get started.

:nuxt-img{.w-full alt="New schedule button in the Schedule tab" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/en-playlists-scheduling-broadcast.webp"}

**Step 1:** choose the playlist for this schedule. The default playlist is automatically selected, but you can pick any playlist in your project.

:nuxt-img{.w-full alt="Step 1: selecting the playlist" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/en-playlists-scheduling-1-playlist.webp"}

**Step 2:** select the group or screen you want to schedule your playlist to.

:nuxt-img{.w-full alt="Step 2: selecting the group or screen" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/en-playlists-scheduling-2-group-or-screen.webp"}

::note
A schedule group lets you link one or more projects to one or more screens in a single space. This simplifies managing your project across your screen network.
::

**Step 3:** the scheduling step is optional. If your project does not need any date or duration conditions, simply apply the schedule. Otherwise, click the "Schedule broadcast" button.

:nuxt-img{.w-full alt="Step 3: choosing between scheduling or immediate broadcast" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/en-playlists-scheduling-3-when.webp"}

## Scheduling

Like individual elements, the full playlist can depend on certain conditions: duration, recurrence, specific time slots…

Start by creating a new schedule in the "Schedule" tab at the top left of the interface. Complete the Configuration and Schedule steps as needed, then click the "Schedule broadcast" button at the Scheduling step.

:nuxt-img{.w-full alt="Schedule broadcast button" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/en-playlists-scheduling-3-schedule.webp"}

Two display types are available:

- **Simple display**, to define a start and/or end date, or a duration.
- **Recurring display**, to set up a regular but infrequent schedule, with a number of repetitions if needed.

:nuxt-img{.w-full alt="Scheduling options: simple or recurring display" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/en-playlists-scheduling-3-schedule-dates.webp"}

Once your conditions are set, click the "Confirm" button. You can review a summary of your publication before broadcasting (or simply saving) your project.

- **Publish and broadcast** to immediately apply this schedule to the relevant groups or screens.
- **Apply without publishing** to save your schedule and activate it later, at the next publication of your project.

:nuxt-img{.w-full alt="Summary and confirmation of the broadcast" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/en-playlists-scheduling-4-confirm.webp"}

Come back to the "Broadcast" tab at any time to edit your broadcast or create a new one.


# Introduction

## Introduction

Touchify Publisher allows you to broadcast your content in a centralized way, configure your screens remotely and monitor the connectivity of your digital fleet.

## Getting Started

Publisher is accessible from the main menu.

## Create my first broadcast group

::tip
Broadcast groups allow you to control groups of screens in a centralized way.
::

To create a broadcast group, click on the **"Create a broadcast group"** button.

![Create a broadcast group](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-creer-groupe.webp)

A form appears to configure the group. Define a name and click on the **"Create group"** button.

![Broadcast group creation form](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-creer-groupe-formulaire.webp)

## Configure the content broadcast on screens

Now, your broadcast group is available. It is necessary to define the content that should be displayed on the screens that will be associated with this group.

On the group page, in the **"Projects"** tab, click on the **"+"** button to add projects to the group.

![Add a project to a broadcast group](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-groupe-ajout-projet.webp)

A window appears, select a project from the list then click on the **"Save"** button to validate the configuration.

## Connect screens to my group

Your broadcast group is now ready. You can connect screens and associate them to this group by clicking on the **"Connect screens"** button.

![Connect screens to a broadcast group](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-groupe-connecter.webp)

A window appears and displays a deployment key. This key allows you to associate a screen with the broadcast group. Copy this key, you will need it when installing the Touchify application.

![Broadcast group connection window](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-groupe-connecter-cle.webp)

## Associate your screen

To start, install the Touchify application on your screen by following the instructions available in the following article: How to install the Touchify application?

During the first startup, click on **"Associate my device"** then enter the deployment key obtained earlier. Finally, click on **"Confirm"**.

![Screen association to a group](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-player-associer.webp)

Congratulations, you have now connected your first screen to Touchify. You can now control this screen remotely by configuring the broadcast group to which the screen is associated.


# Introduction

## Getting Started

::card-group
  :::card
  ---
  icon: i-lucide-app-window-mac
  title: The Touchify Player Application
  to: https://help.touchify.io/en/touchify-player/getting-started/application
  ---
  Introduction article to the Touchify Player application.
  :::

  :::card
  ---
  icon: i-lucide-key-round
  title: Connect
  to: https://help.touchify.io/en/touchify-player/getting-started/connection
  ---
  Discover the two authentication modes of the Touchify Player application according to your use case.
  :::

  :::card
  ---
  icon: i-lucide-grid-2x2
  title: Home Screen
  to: https://help.touchify.io/en/touchify-player/getting-started/home-screen
  ---
  Discover the features of the Touchify Player application home screen.
  :::

  :::card
  ---
  icon: i-lucide-settings
  title: Player Settings
  to: https://help.touchify.io/en/touchify-player/getting-started/settings
  ---
  Discover the Touchify player settings.
  :::
::

## Installation Guides

::card-group
  :::card
  ---
  icon: i-cib-windows
  title: Windows
  to: https://help.touchify.io/en/touchify-player/installation/windows
  ---
  Install Touchify on Windows players.
  :::

  :::card
  ---
  icon: i-cib-android
  title: Android
  to: https://help.touchify.io/en/touchify-player/installation/android
  ---
  Install Touchify on Android players.
  :::

  :::card
  ---
  icon: i-cib-google-chrome
  title: ChromeOS
  to: https://help.touchify.io/en/touchify-player/installation/chromeos
  ---
  Install Touchify on ChromeOS players.
  :::

  :::card
  ---
  icon: i-cib-samsung
  title: Tizen
  to: https://help.touchify.io/en/touchify-player/installation/tizen
  ---
  Install Touchify on Tizen players.
  :::

  :::card
  ---
  icon: i-lucide-cpu
  title: BrightSign
  to: https://help.touchify.io/en/touchify-player/installation/brightsign
  ---
  Install Touchify on BrightSign players.
  :::

  :::card
  ---
  icon: i-cib-linux
  title: Linux & Raspberry Pi
  to: https://help.touchify.io/en/touchify-player/installation/linux
  ---
  Install Touchify on Linux and Raspberry Pi players.
  :::

  :::card
  ---
  icon: i-cib-apple
  title: macOS
  to: https://help.touchify.io/en/touchify-player/installation/macos
  ---
  Install Touchify on macOS players.
  :::

  :::card
  ---
  icon: i-cib-app-store-ios
  title: iOS and iPadOS
  to: https://help.touchify.io/en/touchify-player/installation/ios
  ---
  Install Touchify on iOS and iPadOS players.
  :::

  :::card
  ---
  icon: i-lucide-tv
  title: Android TV
  to: https://help.touchify.io/en/touchify-player/installation/android-tv
  ---
  Install Touchify on Android TV players.
  :::

  :::card
  ---
  icon: i-cbi-lg
  title: LG webOS
  to: https://help.touchify.io/en/touchify-player/installation/webos
  ---
  Install Touchify on webOS devices.
  :::
::

## Troubleshooting

::card-group
  :::card
  ---
  icon: i-lucide-bug
  title: Kiosk Mode Troubleshooting
  to: https://help.touchify.io/en/touchify-player/troubleshooting/kiosk
  ---
  Learn how to troubleshoot the Kiosk mode of the Touchify Player application in critical cases where the device appears to be stuck.
  :::
::


# The Touchify Player Application

## Introduction

The Touchify Player application allows you to display content created in Touchify Studio on your devices: tablets, screens, touch kiosks or all types of interactive or non-interactive digital devices (video walls, projected showcases...).

Touchify allows you to create all types of communication content that can be separated into two main categories:

- Presentation: company presentations, commercial materials, training materials...
- Communication: dynamic or interactive display in a company or public space

## User Profile

### Content Creator

You use Touchify Studio to create your own presentations or to administer your organization's content broadcast on your digital fleet.
In which case, you can connect to the application with your user account.

### Reader Only

Your computer is connected or has been connected by your IT administrator using a deployment key.
Your content is managed by your organization and automatically synchronized by the application.

## Install the Application

The Touchify Player application is compatible with Windows, Linux, macOS, iOS, Android, Tizen and BrightSign.

Find all versions on the [Downloads](https://get.touchify.io){rel="nofollow"} page.

Find all installation guides in the [Help Center](https://help.touchify.io/../introduction).

## Main Features

### Content Display

Depending on the configuration, the application starts on the home screen or on predefined content. For more details, please consult the corresponding articles.

- [Home screen features](https://help.touchify.io/home-screen)
- [Player features](https://help.touchify.io/player)

### Synchronization and Offline Mode

Content and Publisher configurations are synchronized automatically. Once synchronized, the application works offline, in case of network outage or when traveling.

All native Touchify features are compatible with offline mode.

However, web resources are not available offline. This particularly concerns web integrations and videos not hosted on the platform (YouTube, Dailymotion...)

### Automatic Updates

All versions of the Touchify Player application support automatic updates. An up-to-date application is the guarantee of optimal security, better performance, bug fixes in the shortest time and new features.

### Application Security

For deploying interactive screens in a company or public space, it is necessary to secure the computer and completely restrict access to the operating system.

Touchify provides a number of features to guarantee the security of your screens without any technical skills: kiosk mode activated with one click, virtual keyboard restricted to input features, secure browser...


# Connect

## User Profile

**Content Creator:** You use Touchify Studio to create your own presentations or to administer your organization's content broadcast on your digital fleet. In which case, you can connect to the application with your user account.

### Reader Only

You want to connect a computer and administer it with Touchify Publisher. In this case, you can create broadcast groups to associate your screens using a deployment key.

## Connect with a User Account

Use your credentials to connect to your user account and access your published projects.

![User connection on Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/2-connection/fr-player-connexion-utilisateur.webp)

## Associate a Screen to a Broadcast Group

Use the deployment key to associate the computer to one or more broadcast groups and control it from Touchify Publisher.

![Screen association on Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/2-connection/fr-player-connexion-associer.webp)

To learn more, consult the article [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).

## Common Error Cases

Device not connected to Internet
The device must be connected to the Internet to authenticate. The URLs for accessing the Touchify platform must be accessible. If necessary, the company's proxy or firewall must explicitly authorize the following domains: \*.touchify.app, \*.touchify.io and \*.blob.core.windows.net

The Touchify Player application supports Automatic Proxy Configurations (PAC file).

::u-button
---
icon: i-lucide-mail
target: _blank
to: https://touchify.io/contact
variant: primary
---
Contact Us
::

- **Unknown key:** This is usually a deleted group or an input error.
- **Expired key:** The deployment key was created for a custom and time-limited deployment. The key has expired but it can be renewed if the deployment is still valid.
- **Full deployment:** The maximum number of devices has been reached for this deployment key. You can increase the number of authorized screens, delete unused screens or acquire new licenses.
- **Device already associated:** The device is already associated with your organization but may have been disconnected for various reasons. Please delete the screen from Publisher and repeat the operation.


# Home Screen

## Overview

The home screen displays the list of published and authorized projects according to the account or broadcast group configuration.

If you are logged in as a user, you will also find the folder organization as defined in your space as well as the user's teams.

![Project list in Touchify Player application](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-apps.webp)

### Teams

Click on a team to filter the project list.

### Search

The *Search* button launches a search in the title and description of projects.

### Synchronize

The *Synchronize* button allows you to force content synchronization.

## Open a Project

Click on a project tile to start playback. The player displays in a new full-screen window. A long click on the screen allows you to display tools and close the project window.

For more information, please consult the article [Player Settings](https://help.touchify.io/settings).

![Touchify Player toolbar](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-toolbar.webp)

## Project Details

On a project tile, click on the *Details* button at the bottom right to display details. You can thus access project-specific tools and settings.

Project tools and settings are detailed in the Advanced Features section.

![Project details in Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-details.webp)

## Application Menu

The application menu is accessible from the *Menu* button at the top left of the screen. It notably allows access to settings and disconnecting the application.

Settings are detailed in the Application Settings article.

![Touchify Player application menu](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-options.webp)


# Player options

## Show tools

A right-click or long-click displays the player tools. The displayed buttons depend on the account level, project, and broadcast group configuration.

![Touchify Player toolbar](https://help.touchify.io/4-touchify-player/2-getting-started/4-settings/fr-player-options-outils.webp)

## Administrator mode

Depending on the broadcast group configuration, tools can be completely disabled. Administrator mode allows access to tools by clicking successively on the 4 corners of the screen, starting from the top left corner, clockwise.

![Restricted access to Touchify Player configuration](https://help.touchify.io/4-touchify-player/2-getting-started/4-settings/fr-player-options-restreint.webp)

::caution
**Recommendation**

:br


It is strongly recommended to protect Administrator mode with a password in the broadcast group configuration.
::

::note
**Special case**

:br


Administrator mode is disabled if the password is not set and the Hide all buttons option is enabled.
::

## Main buttons

### Close player

The Close button, at the top right of the screen, allows you to return to the home screen.

### Full screen

The Full screen button, at the bottom right, allows you to enable or disable full screen mode.

### Settings

The Menu button, at the top left, provides access to settings, disconnection, or closing the application depending on the device configuration.

### Navigation

The navigation buttons, at the bottom center, allow you to return to the home screen, navigate to the previous page or the next page.

### Enable sound

Depending on the devices, the sound of automatically played videos must be disabled by default. In which case the Enable sound button appears on screen as well as in the tools.

## Project tools and settings

The tools are displayed to the left of the toolbar at the bottom of the screen. The project settings are positioned on the left. They are only visible if the relevant features are enabled.

![Touchify Player toolbar](https://help.touchify.io/4-touchify-player/2-getting-started/4-settings/fr-player-options-outils.webp)

The toolbar features are detailed in the Advanced Features section.


# Installation Guides

## Select Your Platform

Installing Touchify Player depends on the operating system of your device.
You will find below the different guides depending on your platform.

::card-group
  :::card
  ---
  icon: i-cib-windows
  title: Windows
  to: https://help.touchify.io/en/touchify-player/installation/windows
  ---
  Install Touchify on Windows devices.
  :::

  :::card
  ---
  icon: i-cib-android
  title: Android
  to: https://help.touchify.io/en/touchify-player/installation/android
  ---
  Install Touchify on Android devices.
  :::

  :::card
  ---
  icon: i-cib-google-chrome
  title: ChromeOS
  to: https://help.touchify.io/en/touchify-player/installation/chromeos
  ---
  Install Touchify on ChromeOS devices.
  :::

  :::card
  ---
  icon: i-cib-samsung
  title: Samsung Tizen
  to: https://help.touchify.io/en/touchify-player/installation/tizen
  ---
  Install Touchify on Samsung Tizen devices.
  :::

  :::card
  ---
  icon: i-lucide-cpu
  title: BrightSign
  to: https://help.touchify.io/en/touchify-player/installation/brightsign
  ---
  Install Touchify on BrightSign devices.
  :::

  :::card
  ---
  icon: i-cib-linux
  title: Linux & Raspberry Pi
  to: https://help.touchify.io/en/touchify-player/installation/linux
  ---
  Install Touchify on Linux and Raspberry Pi devices.
  :::

  :::card
  ---
  icon: i-cib-apple
  title: macOS
  to: https://help.touchify.io/en/touchify-player/installation/macos
  ---
  Install Touchify on macOS devices.
  :::

  :::card
  ---
  icon: i-cib-app-store-ios
  title: iOS and iPadOS
  to: https://help.touchify.io/en/touchify-player/installation/ios
  ---
  Install Touchify on iOS and iPadOS devices.
  :::

  :::card
  ---
  icon: i-lucide-tv
  title: Android TV
  to: https://help.touchify.io/en/touchify-player/installation/android-tv
  ---
  Install Touchify on Android TV devices.
  :::

  :::card
  ---
  icon: i-cbi-lg
  title: LG webOS
  to: https://help.touchify.io/en/touchify-player/installation/webos
  ---
  Install Touchify on webOS devices.
  :::
::


# Windows Installation Guide

::caution
Warning: The browser or operating system may display a notification indicating potentially malicious software. This is because it takes time for a new version of the application to be validated by the various security systems.


:br

:br


If this happens, click 

**Keep**

 or 

**Run**

.
::

## Download the application

Access the Touchify Player application download page and download the version corresponding to your operating system.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Download Touchify Player
::

## Install the application

Run the downloaded file to start the installation. The program extracts the files and then runs the application. By default, updates are downloaded automatically and installed when the application is closed.

:nuxt-img{.mx-auto alt="Touchify Player Windows installer" src="https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-install.webp" width="400"}

## Connect

The Touchify Player application offers 2 authentication modes.

### Connect with a user account

Use your credentials to connect to your user account and access your published projects.

![User login on Windows](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-connexion.webp)

### Associate a screen with a broadcast group

Use a deployment key to associate the computer with one or more broadcast groups and control it from Touchify Publisher.

![Screen association on Windows](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-association.webp)

For more information, see the [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction) article.

## Configure secure kiosk mode

Kiosk mode allows you to secure the system and automatically run the application when the computer starts up.

::caution
This feature applies to computers connected with Touchify Publisher.
::

### Prerequisites

The computer is connected to a broadcast group on which kiosk mode is enabled.

::tip
It is recommended to set a password to restrict access to the settings.
::

### Enable kiosk mode

On first startup of the application, after connecting the computer, a message will ask if you want to enable kiosk mode. Click Confirm to apply the configuration.

![Kiosk mode activation popup](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-kiosque-popup.webp)

You can enable or disable kiosk mode at any time from the application settings. If you disable kiosk mode, the application will prompt you to reactivate it on the next startup.

![Kiosk mode settings popup](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-kiosque-parametre.webp)

::tip
To access settings or close the application in secure kiosk mode, touch the 4 corners of the screen successively starting from the top left corner, clockwise.


:br

:br

*Special case: this feature is disabled if the password is not set and the "Hide all buttons" option is enabled.*
::


# Android Installation Guide

## Install the application

Two installation options are available for Android:

- **Web application:** simple, no permissions required, no system features
- **Native application:** installation from the application package

::caution
Only the native application allows configuring a secure kiosk mode.
We recommend using the web application only if it's impossible to install the native application or in user login scenarios.
::

### Option 1: web application

Use Google Chrome on your Android device to access the URL: <https://player.touchify.io>{rel="nofollow"}.

Open the browser settings and select Add to home screen.

::div{.my-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![Touchify Player Android web application installation screen](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-web-splash.webp)
![Chrome menu on Android for Touchify Player application installation](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-web-menu.webp)
![Touchify Player Android web application installation confirmation](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-web-confirm.webp)
::

Installation complete, the Touchify Player application is installed on your device and accessible from the home screen.

### Option 2: native application

Download the Touchify Player application for Android on your device: [Touchify APK](https://get.touchify.io/android){rel="nofollow"}.

Open the `touchify.apk` file to install the application.

::caution
**Specific permission**

:br


In some cases, the system will ask to authorize the installation of unknown applications to install the package.
::

::note
**Additional features**

:br


The native application includes an automatic update mechanism. It also offers specific features: configure a secure kiosk mode, set a project as a custom application launcher, use Touchify as a screensaver...
::

## Connect

The Touchify Player application offers 2 authentication modes.

### Connect with a user account

Use your credentials to connect to your user account and access your published projects.

![User login on Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-connexion.webp)

### Associate a screen with a broadcast group

Use a deployment key to associate the computer with one or more broadcast groups and control it from Touchify Publisher.

![Screen association on Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-association.webp)

For more information, see the [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction) article.

## Configure kiosk mode

### Prerequisites

The native application is installed and the device is connected to a broadcast group.

::note
**Recommendation**

:br


It is recommended to enable kiosk mode in the broadcast group configuration and set a password to restrict access to the application settings.
::

::tip
**Good to know**

:br


To access settings or close the application in secure kiosk mode, touch the 4 corners of the screen successively starting from the top left corner, clockwise.


:br

*Special case: this feature is disabled if the password is not set and the "Hide all buttons" option is enabled.*
::

### Option 1: simple kiosk

This method allows you to secure an Android device simply but with certain limitations. In particular, system elements may appear by swiping from the top or bottom of the screen although they are inactive. This does not impact the security of the device.

::caution
New limitations make this method non-optimal on Android 12+.
::

To enable kiosk mode, access the application's system settings.

![Kiosk mode activation on Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-kiosque-parametres.webp)

Confirm kiosk mode activation, then set Touchify Player as the home application or Home App. This screen may change depending on Android versions.

![Kiosk mode activation confirmation on Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-kiosque-confirm.webp)

The Touchify Player application then restarts in kiosk mode. You can disable or temporarily suspend kiosk mode from the application's system settings.

![Kiosk mode deactivation on Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-kiosque-desactiver.webp)

### Option 2: advanced kiosk

This method allows you to set up a fully secure kiosk mode by configuring the Touchify Player application as Device Owner using Android Device Bridge (ADB).

1. Connect the device to a computer using a USB cable;
2. Enable USB debugging;
3. Run the following commands with ADB:

```bash
## check if your device is available and authorized
adb devices

## install the touchify package
adb install -r "PATH\TO\touchify.apk"

## set device owner
adb shell dpm set-device-owner co.touchify.player/co.touchify.cordova.plugin.kiosk.KioskDeviceAdminReceiver 
```

That's it, the application will automatically start in secure mode. You can temporarily suspend kiosk mode from the application's system settings.

::tip
**Where to find ADB?**

:br

:br


If Android development tools are installed on your computer, ADB is located in the 

*SDK platform-tools*

 folder, for example 

*AppData/Local/Android/Sdk/platform-tools*

.


:br

:br


You can also download ADB from 

[Google Android Developers](https://developer.android.com/studio/releases/platform-tools){rel="nofollow"}

.
::


# ChromeOS Installation Guide

## Introduction

Three installation options are available for ChromeOS:

- [Simple Application:](https://help.touchify.io/#option-1-manual-installation) manual installation for use without kiosk mode
- [Managed Application:](https://help.touchify.io/#option-2-managed-installation) remote installation and configuration via the Google Admin Console
- [Kiosk Application:](https://help.touchify.io/#option-3-kiosk-installation) remote installation and configuration via the Google Admin Console

## Installation

### Option 1: Manual Installation

Use the Google Chrome browser on your ChromeOS device to access the URL: <https://player.touchify.app>{rel="nofollow"}.

![Touchify Player installation prompt on ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-interstitiel.webp)

Click the Install icon or open the browser menu and select Install this app.

![Chrome menu on ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-menu.webp)

Confirm the installation by clicking the Install button in the confirmation window.

![Touchify Player installation confirmation on ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-confirm.webp)

That's it, the Touchify Player app is installed on your device and accessible from the app menu.

*If the installer still appears when you first open the app, press the **reload** button on your keyboard.*

### Option 2: Managed Installation

::caution
This section requires the device to be registered in the Google Admin Console beforehand.


[Click here to access Google's documentation on the subject.](https://support.google.com/chrome/a/answer/1360534?sjid=16269526045111143596-EU){rel="nofollow"}
::

To centrally install the Touchify Player app, use the Google Admin Console: <https://admin.google.com>{rel="nofollow"}.

In the Google Admin Console menu, navigate to **Devices → Chrome → Apps & extensions → Users & browsers**.

![Apps menu in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps.webp)

Select the **Organizational Unit** where you want to deploy the Touchify Player app.
To learn more about Organizational Units, [click here](https://help.touchify.io/#creating-an-organizational-unit).

![Selecting organizational unit in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps-uo.webp)

Click the &#x2A;*+** button at the bottom right of the screen, then select **Add by URL*&#x2A; &#x2A;(shown below)*.

![Adding an app in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps-ajout.webp)

In the configuration window, enter the following settings:

- URL: &#x2A;*<https://player.touchify.app>{rel="nofollow"}**
- Open the website in: **Separate window**

![App addition form in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps-formulaire.webp)

That's it, the Touchify Player app will automatically install for all users and devices in the selected **Organizational Unit**.
You can also authenticate your device via the Admin Console. [Click here to learn more](https://help.touchify.io/#associate-the-device-with-touchify-from-the-google-admin-console).

### Option 3: Kiosk Installation

::caution
This section requires the device to be registered in the Google Admin Console beforehand.


[Click here to access Google's documentation on the subject.](https://support.google.com/chrome/a/answer/1360534?sjid=16269526045111143596-EU){rel="nofollow"}
::

To centrally install the Touchify Player app, use the Google Admin Console: <https://admin.google.com>{rel="nofollow"}.

In the Google Admin Console menu, navigate to **Devices → Chrome → Apps & extensions → Kiosks**.

![Kiosks menu in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps.webp)

Select the **Organizational Unit** where you want to deploy the Touchify Player app.
To learn more about Organizational Units, [click here](https://help.touchify.io/#creating-an-organizational-unit).

![Selecting organizational unit in kiosks menu in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-uo.webp)

Click the &#x2A;*+** button at the bottom right of the screen, then select **Add by URL*&#x2A; &#x2A;(shown below)*.

![Adding a kiosk app in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-ajout.webp)

In the configuration window, enter the following URL: <https://player.touchify.app>{rel="nofollow"} then click **Save**. A confirmation window appears, click **Accept**.

![Kiosk app addition form in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-formulaire.webp)

Once the app is added, it must be set as the default app.
To do this, click the **Automatically launch app** selector and select **Touchify Player**.

![Automatic launch of a kiosk app in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-boot.webp)

That's it, the Touchify Player app will automatically install and configure in kiosk mode on all devices in the selected **Organizational Unit**.
You can also authenticate your device via the Admin Console. [Click here to learn more](https://help.touchify.io/#associate-the-device-with-touchify-from-the-google-admin-console).

## Sign In

The Touchify Player app offers 2 authentication modes.

### Sign in with a user account

Use your credentials to sign in to your user account and access your published projects.

![User login on ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-connexion.webp)

### Associate a screen with a broadcast group

Use a deployment key to associate the computer with one or more broadcast groups and control it from Touchify Publisher.

![Screen association on ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-association.webp)

To learn more, see the article [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).

You can also associate the device from the Google Admin Console.
[To learn more, click here](https://help.touchify.io/#associate-the-device-with-touchify-from-the-google-admin-console).

## Configure Kiosk Mode

::caution
This section only applies to companies with 

**ChromeOS Kiosk & Signage**

 or 

**Chrome Enterprise Upgrade**

 licenses.
::

Kiosk mode for ChromeOS is configured from the Google Admin Console: <https://admin.google.com>{rel="nofollow"}.

This section introduces recommended settings for managing Kiosk devices for digital signage and/or interactive display.

### Creating an Organizational Unit

::note
This section is optional. If you have already configured an organizational unit to group your Kiosk devices, you can skip to the next step.
::

::tip
**Definition:**

:br

:br


In the 

**Google Admin Console**

, an 

**Organizational Unit**

 is a group that allows you to gather users and devices that share the same settings.


:br

:br


Organizational units are organized hierarchically. Child units inherit the settings of the parent unit by default.
::

In the Google Admin Console menu, navigate to **Directory → Organizational units**.

![Organizational units panel in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-uo.webp)

Then click the Create organizational unit link at the top right of the screen.

![Creating an organizational unit in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-uo-ajout.webp)

In the window, enter the following information, then click the Create button:

- **Organizational unit name:*&#x2A; Enter a name for the group &#x2A;(e.g.: Kiosk devices)*.
- **Description:*&#x2A; &#x2A;(optional)* Optionally enter a description for the group.
- **Parent organizational unit:*&#x2A; Specify the parent organizational unit &#x2A;(the newly created unit will inherit the settings of the parent unit)*.

![Organizational unit creation form in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-uo-formulaire.webp)

You now have an organizational unit where you can register your devices and configure them centrally.

### Create an enrollment user (optional)

::note
This section is completely optional. It is a best practice recommended by Google to simplify device enrollment in the correct organizational units.
::

A best practice recommended by Google is to create a user dedicated to device enrollment.

Start by creating a user as you normally would, then move them into the organizational unit where you want to enroll your device.

Once your user is created and placed in the correct organizational unit, navigate to **Devices → Chrome → Settings → Users & browsers** then look for the **Enrollment settings** section.

![Device enrollment settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-enregistrement-parametres.webp)

::tip
Make sure the correct organizational unit is selected before changing settings.
::

For the **Device enrollment** setting, select **Place the Chrome device in the user's organization**. A confirmation window appears, click **OK**.

![Device enrollment options in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-enregistrement-conserver.webp)

Then click the **Save** button at the top right of the screen to confirm your configuration.

![Saving device enrollment settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-enregistrement-enregistrer.webp)

### Device Configuration

::note
The settings below are neither exhaustive nor universal. They are a recommended configuration set for a good Kiosk experience.
::

In the Google Admin Console menu, navigate to **Devices → Chrome → Settings → Devices**.

![Device settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-home.webp)

::tip
Make sure the correct organizational unit is selected before changing settings.
::

#### Display Settings

In the search box, enter **display** to filter the list of settings.

In the **Screen settings** section, we recommend the following settings:

- External screen scale: &#x2A;*100%**
- Internal screen scale: &#x2A;*100%**

![Display settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-affichage.webp)

#### Kiosk Settings

In the search box, enter **kiosk** to filter the list of settings.

![Device kiosk settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-kiosque.webp)

In the **Device update settings** section, we recommend the following settings:

- Allow devices to automatically update OS version: **Allow updates**
- Target version: **Use the latest available version**
- Rollback to target version: **Do not rollback OS**
- Target version: **Stable version**
- Deployment plan: **Default**
- Additional shutdown window: **Add your business hours (times when you do not want updates). Enter times day by day**
- Automatically restart after updates: **Allow automatic restarts**

*For more information on these settings, [click here](https://support.google.com/chrome/a/answer/1375678?hl=en#zippy=%2Cautomatic-update-settings){rel="nofollow"}.*

![Device shutdown settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-arrets.webp)

In the **Kiosk settings** section, we recommend the following settings:

- Kiosk device status alert sending mode: **Check at least one box*&#x2A; &#x2A;(email or sms)*
- Contact details for kiosk device status alerts: **Enter at least one email address or phone number*&#x2A; &#x2A;(depending on the box checked above)*

*For more information on these settings, [click here](https://support.google.com/chrome/a/answer/1375678?hl=en#zippy=%2Ckiosk-device-status-alert-sending-mode%2Ccontact-details-for-kiosk-device-status-alerts){rel="nofollow"}.*

![Device alert settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-alertes.webp)

In the **Kiosk power settings** section, we recommend the following settings:

- Inactivity timeout in minutes: **0**
- Inactivity warning timeout in minutes: **0**
- Action on inactivity: **Do nothing**
- Screen dimming timeout in minutes: **0**
- Screen off timeout in minutes: **0**

![Device power settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-alimentation.webp)

Once all settings are entered, you can click the **Save** button at the top right of the screen.

![Saving device settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-enregistrer.webp)

### Associate the device with Touchify from the Google Admin Console

The Touchify Player app can be configured remotely from the Google Admin Console.

In the Google Admin Console menu, navigate to **Devices → Chrome → Apps & extensions → Kiosks** then click on the **Touchify Player** app previously installed.
To install the **Touchify Player** app, refer to the [Option 3: Kiosk installation](https://help.touchify.io/#option-3-kiosk-installation) section.

![Kiosk apps panel in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-associer.webp)

::tip
Make sure the correct organizational unit is selected before changing settings.
::

In the app settings window, edit the **Managed configuration** parameter with the following value:

```json
{ "DeploymentKey": "<your deployment key>" }
```

For example, if your deployment key is **123 456 789 123**, the value should be:

```json
{ "DeploymentKey": "123456789123" }
```

![Kiosk app settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-config.webp)

Then click the **Save** button at the top right of the screen.

![Saving kiosk app settings in Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-config-enregistrer.webp)

That's it, the Touchify Player app will automatically associate with the selected broadcast group on all devices in the selected **Organizational Unit**.


# Tizen Installation Guide

## Install the application

Open the **URL Launcher** tool on Tizen

![Tizen home screen](https://help.touchify.io/4-touchify-player/3-installation/5-tizen/fr-player-tizen-accueil.webp)

In the settings, enter the following URL:&#x20;:b&#x72;&#x2A;*<https://get.touchify.io/tizen>{rel="nofollow"}**

![Launching URL on Tizen](https://help.touchify.io/4-touchify-player/3-installation/5-tizen/fr-player-tizen-lanceur.webp)

::caution
On some older versions of Tizen, the above URL may not work due to a certificate issue.
This is a security vulnerability on these Tizen versions, so we recommend updating the device's firmware. The URL will then work and the vulnerability will be fixed.


:br

:br


If updating the firmware is not possible, you can install the application using the following URL:


:br

**<https://touchifyapplications.blob.core.windows.net/tizen>{rel="nofollow"}**
::

## Associate the device with a broadcast group

Use your deployment key to associate the device with one or more broadcast groups and control it from Touchify Publisher.

![Device association](https://help.touchify.io/4-touchify-player/3-installation/0-common/en-player-association.webp)

For more information, see the [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction) article.


# BrightSign Installation Guide

## Prerequisites

### Firmware update

For optimal operation, make sure to update the firmware of your BrightSign player.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://www.brightsign.biz/downloads/overview
variant: primary
---
BrightSign Downloads
::

### Firmware installation

1. Download the version corresponding to your device
2. Copy the .bsfw file to the root of your SD or micro SD card
3. Insert the card into the BrightSign player
4. Start the player to update the firmware
5. The power LED will blink to indicate the update is in progress

## Download the application

### Use the standard package

If your BrightSign player is already configured or you want to configure it with your own tools, download the standard package directly.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io/brightsign
variant: primary
---
Download BrightSign package
::

### Pre-configure my package

You can also pre-configure your BrightSign player for Touchify and then download the ready-to-use package.

::u-button
---
icon: i-lucide-settings
target: _blank
to: https://get.touchify.io/brightsign/config
variant: primary
---
Open BrightSign configurator
::

![Touchify BrightSign player configurator](https://help.touchify.io/4-touchify-player/3-installation/6-brightsign/fr-player-brightsign-configurateur.webp)

## Install the application

Extract the package downloaded in the previous step to the root of an SD or micro SD card, then insert the card into the BrightSign player.

![Preview of the BrightSign player ZIP archive](https://help.touchify.io/4-touchify-player/3-installation/6-brightsign/fr-player-brightsign-zip.webp)

## Associate a screen with a broadcast group

Use a deployment key to associate the device with one or more broadcast groups and control it from Touchify Publisher.

![Screen association on BrightSign player](https://help.touchify.io/4-touchify-player/3-installation/6-brightsign/fr-player-brightsign-association.webp)

For more information, see the [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction) article.


# Linux & Raspberry PI Installation Guide

## Install the application

### Option 1: Installation script

Touchify provides a script to simplify the installation and configuration of the Touchify Player application on any environment. Just a few steps are needed for an optimized and secure installation.

```bash
curl https://get.touchify.io/linux/install.sh | bash -
```

### Option 2: Manual installation

Go to the Touchify Player application download page and download the version corresponding to your operating system.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Download Touchify Player
::

## Associate a screen with a broadcast group

Use a deployment key to associate the device with one or more broadcast groups and control it from Touchify Publisher.

![Screen association on Linux and Raspberry PI](https://help.touchify.io/4-touchify-player/3-installation/7-linux/fr-player-linux-association.webp)


# macOS Installation Guide

## Download the application

Installation on macOS is done using a DMG package.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Download Touchify Player
::

## Install the application

Open the DMG package, then drag Touchify into the Applications folder.

![DMG installer on macOS](https://help.touchify.io/4-touchify-player/3-installation/8-macos/fr-player-macos-dmg.webp)

## Connect

The Touchify Player application offers 2 authentication modes.

### Sign in with a user account

Use your credentials to sign in to your user account and access your published projects.

![User login on macOS](https://help.touchify.io/4-touchify-player/3-installation/8-macos/fr-player-macos-connexion.webp)

### Associate a screen with a broadcast group

Use a deployment key to associate the device with one or more broadcast groups and control it from Touchify Publisher.

![Screen association on macOS](https://help.touchify.io/4-touchify-player/3-installation/8-macos/fr-player-macos-association.webp)

For more information, see the [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction) article.


# iOS and iPadOS Installation Guide

## Install the application

Use Safari on your iPhone or iPad to access the URL: <https://player.touchify.io>{rel="nofollow"}

Open the browser settings and select **Add to Home Screen**.

Screenshots

That's it, the Touchify Player application is installed on your device and accessible from the home screen.

## Connect

The Touchify Player application offers 2 authentication modes.

### Sign in with a user account

Use your credentials to sign in to your user account and access your published projects.

![User login on iOS](https://help.touchify.io/4-touchify-player/3-installation/9-ios/fr-player-ios-connexion.webp)

### Associate a screen with a broadcast group

Use a deployment key to associate the device with one or more broadcast groups and control it from Touchify Publisher.

![Screen association on iOS](https://help.touchify.io/4-touchify-player/3-installation/9-ios/fr-player-ios-association.webp)

For more information, see the [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction) article.

## Configure kiosk mode

Here are two options to configure an iPad in kiosk mode.

### Option 1: Single App Mode

As the name suggests, this mode allows you to lock the device to a single application.
While effective, this method can be restrictive: it requires using the Apple Configurator app from a Mac or using an MDM solution.

For **Apple Configurator**, simply connect the iPad with a USB cable. Once the device is recognized, enable **Supervised Mode**, then in the **Actions / Advanced** menu, select **Start Single App Mode** and select the **Touchify Player** app.

### Option 2: Guided Access Mode

The advantage of this method is that it does not require any tools and can be done directly on the device.
Start by enabling the **Guided Access** feature from the iPad's general settings and configure the **Passcode Settings**.

Screenshot

Once the feature is enabled, launch the Touchify Player app and then triple-click the iPad's Home button to start Guided Access. Configure according to your needs and then click Start.

Screenshot

To exit Guided Access, triple-click the Home button and enter the password.

Screenshot


# Android TV Installation Guide

## Initial setup

### Google account

Generally, Android TV requires connecting the device with a Google account. You can create a specific account for your project, for example &#x2A;<mycustomer.mycompany.signage@gmail.com>*.

On some devices, it is possible to skip this step. In that case, Google Play will not be available and installing applications will require connecting the device to a computer. More information in the section [Install an application with ADB](https://help.touchify.io/#use-adb-to-install-an-application-optional).

### First start

Before starting the installation of Touchify on your Android TV player, a few steps are necessary to start the player.
Begin by connecting the player to your screen and to power, then follow the on-screen instructions:

1. Pair the remote control
2. Select the interface language and region
3. Skip the &#x2A;*"Set up your TV quickly with your Android phone"** step
4. Connect the player to your Wi-Fi network
5. Sign in with a Google account
6. Accept the &#x2A;*"Terms of Use"**
7. On the &#x2A;*"Google Services"** step:

   - Uncheck &#x2A;*"Use location"**
   - Uncheck &#x2A;*"Help improve Android"**
   - Click &#x2A;*"Accept"**
8. On the &#x2A;*"Google Assistant"*&#x2A; step, select &#x2A;*"No, thanks"**
9. On the &#x2A;*"Install other apps"*&#x2A; step, uncheck &#x2A;*"Install all the following apps"*&#x2A;, then &#x2A;*"Continue"**
10. On the &#x2A;*"Stay informed"*&#x2A; step, select &#x2A;*"No, thanks"**
11. On the &#x2A;*"Select your subscriptions"*&#x2A; step, click &#x2A;*"Continue"**

## Install prerequisites

### Install the Downloader app

1. Open "Google Play"
2. Search for "Downloader"
3. Select "Downloader by AFTVnews"
4. Click "Install"

*Note: If Google Play is not available, use ADB to install Touchify directly. More information in the section [Install an application with ADB](https://help.touchify.io/#use-adb-to-install-an-application-optional).*

![Downloading Downloader from Google Play](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-downloader.webp)

### Update the webview

1. Open &#x2A;*"Google Play"**
2. Search for &#x2A;*"webview"**
3. Select &#x2A;*"Android System Webview"**
4. Click &#x2A;*"Update"**

*Note: If Google Play is not available, use ADB to update the webview. More information in the section [Install an application with ADB](https://help.touchify.io/#use-adb-to-install-an-application-optional).*

![Downloading WebView from Google Play](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-webview.webp)

## Configure the player

### Update the system

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Device Preferences"*&#x2A; then &#x2A;*"About"**
3. Click &#x2A;*"System update"**
4. If an update is available, install it

### Remove player restrictions

::note
Stay on the "About" page, start at step 3.
::

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Device Preferences"*&#x2A; then &#x2A;*"About"**
3. Go to &#x2A;*"Build"**
4. Click **7*&#x2A; times on &#x2A;*"Build"**

### Change the device name

::note
Stay on the "About" page, start at step 3.
::

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Device Preferences"*&#x2A; then &#x2A;*"About"**
3. Click on &#x2A;*"Device name"*&#x2A; then &#x2A;*"Edit"**
4. Select &#x2A;*"Enter a custom name"**
5. Enter an identifiable name &#x2A;(e.g. screen-client-1)*
6. Press &#x2A;*"Enter"** on the keyboard

### Disable the screensaver

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Device Preferences"*&#x2A; then &#x2A;*"Developer options"**
3. Enable &#x2A;*"Stay awake"**
4. Click &#x2A;*"Back"*&#x2A; to return to the &#x2A;*"Device Preferences"** page
5. Go to &#x2A;*"Screen saver"**
6. In &#x2A;*"Screen saver"*&#x2A;, select &#x2A;*"Sleep"**
7. In &#x2A;*"Put device to sleep"*&#x2A;, select &#x2A;*"Never"**

### Remove applications

::tip
It is recommended to remove or disable unused applications.
::

::note
Note: you can use the ADB TV app to simplify this operation (see section 

[Install the ADB TV app](https://help.touchify.io/#use-adb-to-install-an-application-optional)

)
::

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Apps"**
3. Select an app to remove
4. Click &#x2A;*"Uninstall"*&#x2A; or &#x2A;*"Disable"**

### Update applications

1. Open &#x2A;*"Google Play"**
2. Click the user icon at the top right of the screen
3. Go to &#x2A;*"Manage apps and games"*&#x2A; then &#x2A;*"Update"**
4. Click &#x2A;*"Update all"**

### Allow Downloader to install applications

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Apps"*&#x2A; then &#x2A;*"Security & restrictions"*&#x2A; then &#x2A;*"Unknown sources"**
3. Check &#x2A;*"Downloader"**

### Disable recommendations and synchronization

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Accounts & Sign-in"**
3. Select your account
4. Uncheck &#x2A;*"Autoplay trailers"**
5. Check &#x2A;*"Apps only"*&#x2A; and click &#x2A;*"Enable"**
6. Uncheck synchronizations for &#x2A;*"Calendar"*&#x2A;, &#x2A;*"Contacts"*&#x2A;, and &#x2A;*"Google Play Movies & TV"**

## Install Touchify Player

On the home screen:

1. Open &#x2A;*"Downloader"**
2. Allow &#x2A;*"Downloader"** to access photos, media, and files on your device
3. In the address bar, enter the following URL: **get.touchify.io/android**
4. After downloading, a confirmation window appears, click &#x2A;*"Install"**
5. After installation, click &#x2A;*"OK"*&#x2A; &#x2A;(do not open the app yet)*

![Downloading Touchify Player on Downloader](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-download.webp)

![Installing Touchify Player on Downloader](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-installe.webp)

## Grant permissions to Touchify Player

### Allow the app to launch at startup

1. Go to the player settings &#x2A;(top right of the screen)*
2. Go to &#x2A;*"Apps"*&#x2A;, then &#x2A;*"Special app access"*&#x2A;, then &#x2A;*"Display over other apps"**
3. Enable &#x2A;*"Touchify Player"**
4. It is recommended to **disable all other apps**

![Allowing Touchify overlay in Android TV settings](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-superposition.webp)

### Allow the app to update

1. Go back to the &#x2A;*"Apps"** menu
2. Go to &#x2A;*"Security & restrictions"*&#x2A; then &#x2A;*"Unknown sources"**
3. Enable &#x2A;*"Touchify Player"**
4. Optionally, disable &#x2A;*"Downloader"**

![Allowing Touchify update in Android TV settings](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-maj.webp)

## Link the screen to your account

From the home screen:

1. Open &#x2A;*"Touchify Player"**
2. Enter your deployment key (see [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction))

![Screen association on Android TV](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-association.webp)

::note
On first launch, a popup will appear asking you to enable automatic launch of Touchify Player at device startup, click 

**"Enable"**

.
::

![Automatic startup permission for Touchify on Android TV](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-boot.webp)

## Use ADB to install an application (optional)

### Where to find ADB?

If you have installed the Android development tools on your computer, ADB is located in the *platform-tools* folder of the SDK, for example *AppData/Local/Android/Sdk/platform-tools*.

You can also download ADB from [Google Android Developers](https://developer.android.com/studio/releases/platform-tools){rel="nofollow"}.

### Where to find applications?

Several websites list Android applications, for example [APK Mirror](https://www.apkmirror.com/){rel="nofollow"}.

Search for an application and select the latest version that matches your Android version.

The Touchify Player application is available on our website:

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Download Touchify Player
::

### Install an application

In the command line, in the folder containing ADB:

```bash
adb install -r "PATH\TO\FILE\package.apk"
```

## Configure an advanced kiosk mode (optional)

### Install the ADB TV app

::note
If the device is already connected via ADB, you can skip this step. The ADB TV app allows access to ADB directly from the device.
::

From Google Play, search for the ADB TV app and install it.

If Google Play is not available, install the app using ADB.

### Set Touchify as the Home app

Run the following command to set Touchify as the Home app

```bash
## From a command line
adb shell pm set-home-activity co.touchify.player/co.touchify.cordova.plugin.launcher.LauncherActivity

## From the ADB TV console
pm set-home-activity co.touchify.player/co.touchify.cordova.plugin.launcher.LauncherActivity
```

Run the following command to disable the default home application:

```bash
## From a command line
adb shell pm disable-user --user 0 com.google.android.tvlauncher

## From the ADB TV console
pm disable-user --user 0 com.google.android.tvlauncher
```

### Restore the default home screen

Run the following commands to restore the default home screen:

```bash
## From a command line
adb shell pm enable --user 0 com.google.android.tvlauncher
adb shell pm set-home-activity com.google.android.tvlauncher/.MainActivity

## From the ADB TV console
pm enable --user 0 com.google.android.tvlauncher
pm set-home-activity com.google.android.tvlauncher/.MainActivity
```


# LG webOS Installation Guide

## Install the application

Access the device settings and open the **SI Server Configuration**.

![webOS EZ setting](https://help.touchify.io/4-touchify-player/3-installation/11-webos/en-player-webos-ez-setting.webp)

Enter the following configuration:

- Enable the option: **Fully Qualified Domain Name**
- Enter the following URL: &#x2A;*<https://get.touchify.io/webos>{rel="nofollow"}**
- Select **Application Launch Mode**: **Local**
- Select **Application Type**: **IPK**
- Select **Local Application Update** mode: **Remote**
- Click **Confirm** then **OK**
- Restart the device

![webOS SI Server settings](https://help.touchify.io/4-touchify-player/3-installation/11-webos/en-player-webos-si-server-setting.webp)

## Associate the device with a broadcast group

Use your deployment key to associate the device with one or more broadcast groups and control it from Touchify Publisher.

![Device association](https://help.touchify.io/4-touchify-player/3-installation/0-common/en-player-association.webp)

To learn more, see the article [Introduction to Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).


# Philips E-Paper Installation Guide

::note
E-paper displays work differently from traditional displays.
As a result, installing Touchify Player on these displays requires a specific setup.
::

## Introduction

Touchify for e-paper includes two different operating modes:

**Connected mode:** :br
The display is connected to the Internet and to Touchify. Content is created from the Touchify interface and published remotely to the e-paper display. :br
This is the right mode for centralizing all your content and controlling distribution across your e-paper displays.
All Touchify features are available, including widgets and dynamic data.
The only differences are that video playback and animations are not available, because they are not compatible with e-paper displays.

**Standalone mode:** :br
The display is not connected to the Internet or to Touchify. Content is loaded onto the display from a smartphone or tablet through the display's Wi-Fi hotspot.
This is the right mode for publishing content on an e-paper display without Internet access, or for quickly controlling a local e-paper display.
In this mode, the display can receive images and PDF documents.

## Prerequisites

To install Touchify Player on a Philips e-paper display, you need:

- A Philips e-paper display
- A USB to micro-USB cable to connect the display to a computer
- A Windows computer to run the installer

On the computer, you will need the following software:

- The USB driver for Philips e-paper displays: [Download](https://touchifyapplications.blob.core.windows.net/epaper/android/philips/DriverAssitant_v5.1.1.zip){rel="nofollow"}
- The **scrcpy** software to view the e-paper screen on your computer: [Download](https://github.com/Genymobile/scrcpy/releases/latest){rel="nofollow"}
- The Touchify installer for e-paper: [Download](https://touchifyapplications.blob.core.windows.net/epaper/android/installer/installer.exe){rel="nofollow"}

### Install the USB driver

Before connecting the display to your computer, you must install the USB driver for Philips e-paper displays.
Download the driver from the link above, then extract the ZIP file and run `DriverInstall.exe` to install the driver.

### Connect the display to your computer

To begin, connect the e-paper display to your computer using the USB to micro-USB cable.
The micro-USB port is located on the back of the display, next to the power port and the USB-A port.

::u-page-grid
  :::u-page-card{title="Philips 13BDL4150IW"}
  ![Ports of the Philips 13BDL4150IW e-paper display](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-ports-13.webp)
  :::

  :::u-page-card{title="Philips 24BDL4050I"}
  ![Ports of the Philips 24BDL4050I e-paper display](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-ports-24.webp)
  :::

  :::u-page-card{title="Philips 32BDL5150I"}
  ![Ports of the Philips 32BDL5150I e-paper display](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-ports-32.webp)
  :::
::

## Run the e-paper installer

Once the display is connected to your computer, download the Touchify e-paper installer from the link above and run `installer.exe` to start the installation of Touchify Player on the e-paper display.
The installer automatically detects the connected display and lets you choose the installation mode.

![Mode selection screen](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-mode.webp)

::note
If you want to use standalone mode, 

[click here](https://help.touchify.io/#local-standalone-installation)

 to jump directly to the corresponding section of this guide.
::

### Standard Touchify installation

Select the "Standard Touchify installation" mode to install Touchify Player in connected mode.
In this mode, the e-paper display is connected to the Internet and to Touchify, and content is created from the Touchify interface and published remotely to the e-paper display.
This is the right mode for centralizing all your content and controlling distribution across your e-paper displays.
All Touchify features are available, including widgets and dynamic data.
The only differences are that video playback and animations are not available, because they are not compatible with e-paper displays.

#### Customize the display name

The installer lets you customize the e-paper display name to make it easier to identify in Touchify Publisher.
Enter the name you want to give your e-paper display, or leave the field blank to keep the default name.

![Display name customization](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-name.webp)

#### Customize the startup logo

The installer lets you customize the startup logo of the e-paper display to remove the default Philips logo.
Type "y" and select a logo from the list, or select "n" to keep the default Philips logo.

![Startup logo customization](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-logo.webp)

#### End of installation

The installer configures the e-paper display and installs Touchify Player. Once installation is complete, the application starts automatically.

#### Connect the display to Touchify

To connect the display to Touchify, you need to link the display to a broadcast group.
To do this, go to Touchify Publisher, create a broadcast group, and copy the deployment key from the group.

To enter the deployment key on the display, download the `scrcpy` app using the link above.
Enter the deployment key in the corresponding field, then click "Connect" to connect the display to Touchify.

:nuxt-img{.mx-auto alt="Display pairing" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-connect.webp" width="300"}

::note
Also use scrcpy to configure any other Android settings required for your installation, such as connecting the e-paper display to your local Wi-Fi network.
::

### Local standalone installation

Select the "Local standalone installation" mode to install Touchify Player in standalone mode.
In this mode, the display is not connected to the Internet or to Touchify. Content is loaded onto the display from a smartphone or tablet through the display's Wi-Fi hotspot.
This is the right mode for publishing content on an e-paper display without Internet access, or for quickly controlling a local e-paper display.
In this mode, the display can receive images and PDF documents.

#### Customize the display name

The installer lets you customize the e-paper display name to make it easier to identify.
Enter the name you want to give your e-paper display, or leave the field blank to keep the default name.

![Display name customization](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-name.webp)

#### Configure the Wi-Fi hotspot

The installer asks whether you want to configure the Wi-Fi hotspot credentials for the e-paper display. Type "y" to configure the Wi-Fi hotspot, or "n" to keep the default credentials.
If you choose to configure the Wi-Fi hotspot, enter the network name (SSID) and password you want to use for the e-paper display hotspot.

![Wi-Fi hotspot configuration](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-hotspot.webp)

#### Customize the startup logo

The installer lets you customize the startup logo of the e-paper display to remove the default Philips logo.
Type "y" and select a logo from the list, or select "n" to keep the default Philips logo.

![Startup logo customization](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-logo.webp)

#### Configure standalone mode settings

The installer asks whether you want to configure standalone mode settings. Type "y" to configure standalone mode settings, or "n" to keep the default settings.

![Standalone mode settings configuration](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-standalone.webp)

Standalone mode settings are:

- **Would you like to show a QR code on startup for easy remote connection?** : :br Type "y" to show a QR code at startup for easy connection from a smartphone or tablet, or "n" not to show the QR code.
- **Would you like to show Wi-Fi information on the device?** : :br Type "y" to display Wi-Fi connection information (SSID and password) on the e-paper display at startup, or "n" not to display Wi-Fi connection information.
- **Enter the number of minutes of inactivity before the device automatically shuts down?** : :br Enter the number of inactive minutes before the e-paper display automatically turns off. Type "0" to disable automatic shutdown.

## Using standalone mode

This section presents the steps to load content onto an e-paper display in standalone mode.

### Connect to the e-paper display Wi-Fi hotspot

At startup, if you enabled the option to display Wi-Fi connection details, the hotspot credentials for the e-paper display are shown on screen.
A QR code is also displayed. By scanning it, your smartphone automatically connects to the e-paper display hotspot.

![Standalone mode startup screen](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-startup.webp)

### Open the web app

Once connected to the e-paper display hotspot, open a web browser on your smartphone or tablet and enter the IP address shown on the e-paper display to access the standalone mode management web app.
The display also shows a QR code so you can connect to the web app more easily.

### Add the display license

On your first connection, the app asks you to add the e-paper display license to activate standalone mode.
If you do not have it yet, request it from your reseller or integrator and provide the e-paper display serial number.
The serial number is shown at the bottom of the license page or on the label on the back of the e-paper display.

:nuxt-img{.mx-auto alt="License activation" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-license.webp" width="300"}

### Upload content to the e-paper display

Once connected to the web app, you can upload content to the e-paper display by clicking the "Change media" button.

:nuxt-img{.mx-auto alt="Standalone e-paper app home" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-app-home.webp" width="300"}

You can then select an image or a PDF document to upload to the e-paper display from your smartphone or tablet.

:nuxt-img{.mx-auto alt="Select media in the standalone e-paper app" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-app-browse.webp" width="300"}

Once media is selected, if it is a PDF document, you can choose which page to display on the e-paper screen.

:nuxt-img{.mx-auto alt="Select a PDF page in the standalone e-paper app" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-app-pdf.webp" width="300"}

Before sending media to your e-paper display, you can crop it on your smartphone so it fits the display.

:nuxt-img{.mx-auto alt="Adjust media for the e-paper display" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-crop.webp" width="300"}

Finally, click "Confirm and send" to upload the media to the e-paper display.

:nuxt-img{.mx-auto alt="Sending media to the e-paper display" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-sending.webp" width="300"}:nuxt-img{.mx-auto alt="Media sent confirmation" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-sent.webp" width="300"}

::note
If your e-paper display runs on battery, remember to turn it off after uploading your media to save battery.
You can click the "Turn off e-paper" button in the web app to switch off the display remotely.
Your image will remain visible on the e-paper display even when it is turned off.
::


# Kiosk mode unlocking

## Introduction

Your Touchify Player application no longer automatically synchronizes your content? You can't connect the application anymore? You can't exit kiosk mode?
This article helps you troubleshoot the application in case of blocking.

::note
**This article particularly concerns devices locked in kiosk mode.**
::

## Show tools

Depending on the application configuration, tools may be accessible by long-pressing the screen.
If the toolbars are locked, click successively on the 4 corners of the screen, starting from the top left corner, clockwise.

If a password has been set, enter the password to access the tools and application settings.

## Check Internet connection

If the device is connected to the Internet, the **Synchronize** button is present in the toolbar at the bottom of the screen.
Launch a synchronization to validate the connection. In case of synchronization error, an error message will appear.
This is generally a network configuration problem.

::note
**Network configuration**

:br

:br


In case of network problems, please contact your IT department to request authorization for the following URLs:


:br

:br


\**.touchify.io, 

*.touchify.app, *.blob.core.windows.net,*.table.core.windows.net*
::

::note
**You can also check your device connections in Touchify Publisher.**
::

## Close the application

If you want to close the locked application and access the operating system, open settings from the button at the top left of the screen then click **Close application**.

With a keyboard, `` + `` also allows you to close the application.

### Kiosk Mode

Caution, in secure kiosk mode, the operating system interface may be disabled, in which case you will need a keyboard.

::tip
**Windows tip**

:br


Use 

``

 \+ 

``

 \+ 

``

 to open task manager or 

``

 \+ 

``

 \+ 

``

.
::

::caution
**Disable kiosk mode**

:br


If you want to restore the operating system interface, disable kiosk mode from the application settings, 

*System Settings*

 section.
::

## Reset the application

### From settings

Access the application settings, **Synchronization** section, then select **Delete data**. The application will be reset and will need to be reconnected.

### From the system

Delete the Touchify Player application data.

#### Windows, Linux, MacOS

Close the application and open the file explorer. Access the application data folder and delete the folder. Once the folder is deleted, restart and reconnect the application.

```bash
# Windows
%APPDATA%\co.touchify.player

# Linux
~/.config/co.touchify.player

# Mac OS
~/Library/Application Support/co.touchify.player
```

::tip
**Windows tip**

:br


If the graphical interface is disabled, use Ctrl+Shift+Esc to open task manager then launch file explorer: File > Run > explorer.exe
::

::caution
**Device reconnection**

:br


After a system reset, the device has not been disconnected, it will need to be manually removed from the screen list in Touchify Publisher.
::

#### Android

Access Android settings, **Applications** section. Select **Touchify Player** then **Delete application data**.

## Contact us

In case of problems, please [contact support](https://touchify.io/contact){rel="nofollow"}.


# Introduction

## Our Tips & Tricks

::card-group
  :::card
  ---
  icon: i-lucide-file-play
  title: Optimize a Video
  to: https://help.touchify.io/en/tips-tricks/optimize-video
  ---
  Discover how to reduce the size of your videos to optimize their loading and the performance of your content.
  :::

  :::card
  ---
  icon: i-lucide-image-plus
  title: Create an Interactive Image
  to: https://help.touchify.io/en/tips-tricks/interactive-image
  ---
  Design buttons and windows to enhance your image.
  :::

  :::card
  ---
  icon: i-lucide-gallery-vertical
  title: Create a Scrolling Area
  to: https://help.touchify.io/en/tips-tricks/scrollable-content
  ---
  Discover how to create scrolling content.
  :::
::


# Keyboard Shortcuts

::note
The character 

``

 represents the Command key on macOS.
::

## General Shortcuts

| Windows Shortcut | macOS Shortcut | Action              |
| ---------------- | -------------- | ------------------- |
| `` + ``          |                | Preview the project |
| `` + `` + ``     | `` + `` + ``   | Preview the page    |
| `` + ``          | `` + ``        | Publish the project |
| `` + ``          | `` + ``        | Undo last action    |
| `` + ``          | `` + ``        | Redo last action    |

## Interface

| Windows Shortcut        | macOS Shortcut          | Action             |
| ----------------------- | ----------------------- | ------------------ |
| `` + `` + ``            | `` + `` + ``            | Show file explorer |
| `` + `` + ``            | `` + `` + ``            | Show presentations |
| `` + `` + ``            | `` + `` + ``            | Show pages         |
| `` + `` + ``            | `` + `` + ``            | Show widgets       |
| `` + `` + `` or `` + `` | `` + `` + `` or `` + `` | Show elements      |
| `` + `` + ``            | `` + `` + ``            | Show history       |

## Display

| Shortcut | Action                               |
| -------- | ------------------------------------ |
| `` + ``  | Fit zoom to screen size              |
| `` + ``  | 100% zoom                            |
| `` + ``  | Zoom in                              |
| `` + ``  | Zoom out                             |
| `` + ``  | Show/hide rulers                     |
| `` + ``  | Show/hide grid                       |
| `` + ``  | Show/hide guides                     |
| `` + ``  | Show/hide template guides            |
| `` + ``  | Enable/disable snapping              |
| `` + ``  | Enable animations                    |
| ``       | Hide interface and enable animations |

## Manipulate Selection

| Windows Shortcut    | macOS Shortcut    | Action                                                |
| ------------------- | ----------------- | ----------------------------------------------------- |
| `` + `Click`        |                   | Add/remove an item to selection                       |
| `` + `Click`        |                   | Add an item to selection                              |
| ``                  |                   | Deselect                                              |
| `` or `` + ``       | `` or `` + ``     | Delete selection                                      |
| `` + ``             | `` + ``           | Copy selection                                        |
| `` + ``             | `` + ``           | Paste selection in current page or any page or widget |
| `` + ``             | `` + ``           | Duplicate selection                                   |
| ``, ``, ``, ``      |                   | Move selection in a direction                         |
| `` + ``, ``, ``, `` |                   | Move selection by step in a direction                 |
| `` + `` / ``        | `` + `` / ``      | Bring forward or send backward                        |
| `` + `` + `` / ``   | `` + `` + `` / `` | Bring to front or send to back                        |

## Transform Selection

When transforming from a corner or side of the selection, hold:

| Shortcut | Action                                        |
| -------- | --------------------------------------------- |
| ``       | Distort selection without keeping proportions |
| ``       | Force square selection                        |
| ``       | Keep the center of the selection              |

## Drawing

::note
These shortcuts apply to any drawing operation (drawing a text area, drawing a shape...)
::

When drawing, hold:

| Shortcut | Action                         |
| -------- | ------------------------------ |
| ``       | Keep proportions               |
| ``       | Force square drawing           |
| ``       | Keep the center of the drawing |
| ``       | Cancel drawing                 |

## Text Editor

| Windows Shortcut | macOS Shortcut | Action         |
| ---------------- | -------------- | -------------- |
| `` + `` to ``    | `` + `` to ``  | Heading 1 to 6 |
| `` + ``          | `` + ``        | Bold           |
| `` + ``          | `` + ``        | Italic         |
| `` + ``          | `` + ``        | Underline      |
| `` + ``          | `` + ``        | End editing    |

## File Explorer

| Windows Shortcut                   | macOS Shortcut | Action                                               |
| ---------------------------------- | -------------- | ---------------------------------------------------- |
| `` / `` + ``                       |                | Toggle between the folders panel and the files panel |
| `` + ``                            |                | Switch from Grid view to List view of files          |
| ``, ``, ``, ``                     |                | Navigate through folders or files                    |
| `` / `&#x60; &#x2A;(Page Up/Down)* |                | Navigate through files by step                       |
| ``                                 |                | Open folder or insert file                           |
| `` or `` + ``                      | `` or `` + ``  | Delete folder or file                                |
| ``                                 |                | Go to previous folder                                |
| `` + ``                            |                | Go to next folder                                    |
| `` + ``                            |                | Go to parent folder                                  |
| `` + ``                            |                | Create a folder                                      |
| `` + ``                            |                | Import one or more files                             |
| `` + ``                            |                | Search within files                                  |

## Window or Message

| Shortcut | Action             |
| -------- | ------------------ |
| ``       | Validate / Confirm |
| ``       | Close window       |


# Optimize a Video

## Introduction

Touchify supports many video formats. However, for better compatibility we recommend **MP4** and **WebM** formats.

We offer you in this article a solution to optimize videos imported into Touchify.
Obviously this solution is not unique and many tools are available.
We will use here two free tools without constraining limitations:

- Any Video Converter (PC, Mac)
- Video Smaller (online)

## First Step: Any Video Converter

Any Video Converter (AVC) is free software, available on PC and Mac, offering a large number of video processing features and very good performance in managing MP4 files.

Let's start with a first optimization phase with the following options:

- MP4 format (HTML5 category)
- Keep original size
- High quality

Depending on the characteristics of the original file, the weight can be divided by 5 on average.
For example, 200 MB for an original file of 1 GB, without quality loss.

::note
It is also possible to reduce the dimensions of the video. However, we recommend performing this operation in the next step.
::

## Second Step: Video Smaller

Video Smaller (VS) is an online solution for compressing and resizing videos with or without quality loss.
The main limitation concerns file size, limited to 500 MB.

### Compression

The maximum compression option is very effective and allows significant weight reduction while maintaining satisfactory quality.
For optimal quality, select the **Use low compression level** option.

### Resizing

Depending on the targeted devices or the display size of the video in your project, it is advisable to reduce the video dimensions and thus further reduce the weight of the final file.

## Results Obtained

Here is an example of results obtained from an MP4 video file of **1.1 GB** without resizing, without quality loss or moderate loss:

### First compression with AVC in high quality

Final weight: **196 MB**, **divided by 5**.

### Second compression with VS in high quality

Final weight: **118 MB**, **divided by 10**.

### Second compression with VS in maximum compression

Final weight: **72 MB**, **divided by 15**.

## Conclusion

If only one solution had to be kept, Video Smaller is the one that offers the best results while remaining very simple to use. The main disadvantage is the duration of the operation due to loading times to send then download the file.

On the contrary, Any Video Converter allows you to obtain a first compression very quickly. The combination of the 2 tools seems to us to be an optimal solution.


# Tutorial: Create an Interactive Image

## Step 1: Choose an Image

Unfold the &#x2A;*"Gallery"*&#x2A; tab &#x2A;(image icon)&#x2A; from the left sidebar then select the image of your choice. To insert it, click on the &#x2A;*"+"** button or drag it directly into the page.

Beforehand, don't forget to [import your images into the gallery](https://help.touchify.io/../touchify-studio/elements/media).

Customize the size and alignment of your image in the &#x2A;*"Options"*&#x2A; window &#x2A;(crosshair icon)*, on the right of the work area.

![File explorer in Touchify Studio](https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-explorer.webp)

## Step 2: Create Buttons

### Text Button

Click on the &#x2A;*"Text"** button in the insertion menu. Choose the text style you want to apply or draw the button directly on the page.

Customize the button's appearance in the &#x2A;*"Element customization"*&#x2A; tabs &#x2A;(crosshair icon)* on the right of the work area.
Modify the text and block style to your liking: modify angles, add a background color, apply a shadow\...

:nuxt-img{.w-full alt="Creating a Text button in Touchify Studio" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-bouton-texte.webp"}

::tip
Discover the extent of 

[text](https://help.touchify.io/../touchify-studio/elements/texts)

 and 

[block](https://help.touchify.io/../touchify-studio/elements/background-and-borders)

 tools in the dedicated articles.
::

### Image Button

Click on the &#x2A;*"Image"*&#x2A; button in the insertion menu. Choose the image you want to add then click on the &#x2A;*"+"** button or drag the image directly into the page.

Customize the image's appearance in the &#x2A;*"Element customization"*&#x2A; tabs &#x2A;(crosshair icon)* on the right of the work area.
Modify the image and block style to your liking: add an outline, apply a shadow, adjust the image size...

:nuxt-img{.w-full alt="Creating an Image button in Touchify Studio" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-bouton-image.webp"}

::tip
Discover the extent of 

[background and border](https://help.touchify.io/../touchify-studio/elements/background-and-borders)

 tools in the dedicated article.
::

## Step 3: Apply a Window to the Button

Select the button then click on the &#x2A;*"Element interactions"*&#x2A; tab &#x2A;(touch icon)&#x2A; in the right sidebar.
Choose the &#x2A;"Text window"* option and customize the different parameters:

- **Define window activation*&#x2A; in the &#x2A;*"Trigger"** tab: the *Touch* option is selected by default, unfold the menu to choose another trigger action
- **Insert your text*&#x2A; in the &#x2A;*"Window content"** tab
- **Modify the size and position*&#x2A; of the window in the &#x2A;*"Dimensions"*&#x2A; and &#x2A;*"Position"** tabs: these parameters can be fully customized or linked to those of the trigger button
- **Detail the closing conditions*&#x2A; of the window in the &#x2A;*"Closing options"** tab
- **Customize the style*&#x2A; of the text and window in the &#x2A;*"Text customization"*&#x2A; and &#x2A;*"Window customization"** tabs: find the same customization tools as for page elements

![Editing a text window in Touchify Studio](https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-fenetre-texte.webp)

::tip
Discover the 

[different types of windows](https://help.touchify.io/../touchify-studio/interactions/dialogs)

 in the dedicated article.
::

## Step 4: Preview

To preview the project, click on the &#x2A;*"Preview"** button at the top left of the work area.
This mode will allow you to visualize and test the interactions you just created.

:nuxt-img{alt="Preview button in Touchify Studio" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-preview.webp"}

To exit the mode, click on the &#x2A;*"Close"** button at the top right of the window.

:nuxt-img{alt="Preview close button in Touchify Studio" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-preview-fermer.webp"}

Examples of interactive images:

:nuxt-img{.w-full alt="Example of interactive bird image" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-exemple-oiseau.webp"}:br:nuxt-img{.w-full alt="Example of interactive shoe image" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-exemple-chaussure.webp"}:br:nuxt-img{.w-full alt="Example of interactive panorama image" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-exemple-panorama.webp"}


# Tutorial: Scrollable area

## Elements compatible with scrolling

This functionality can be applied to several types of elements. It is activated in the **Element Customization*&#x2A; tab &#x2A;(target icon)* to the right of the workspace:

- **Text**: check the *Allow scrolling* option in the *Scrolling Options* window
- **Menu**: check the *Allow scrolling* option in the *Display Options* window
- **Custom component**: choose the *Scrolling* option in the *Display mode* menu of the *Component* window
- **Text & custom windows**: check the *Allow scrolling* option in the *Scrolling Options* window

## Creating a scrolling custom component

### Step 1: Create the content

Add to your page the elements that will appear in the area.

To choose an image, expand the &#x2A;*"Gallery"*&#x2A; tab &#x2A;(image icon)&#x2A; in the left sidebar then select your desired image.
To insert it, click the &#x2A;*"+"** button or drag it directly into the page.

To add other types of media (videos, pdfs...) expand **the corresponding tab** in the left sidebar. Insert your media the same way as an image.
Don't forget to [import your media into the gallery](https://help.touchify.io/../touchify-studio/elements/media) beforehand.

Customize the size and position of your image in the &#x2A;*"Options"*&#x2A; window &#x2A;(crosshair icon)*, to the right of the workspace.

![File explorer in Touchify Studio](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-explorer.webp)

To add text, click the &#x2A;*"Text"** button in the insertion menu.
Choose the style you want to apply or draw the block directly on the page.

Customize the element in the &#x2A;*"Element Customization"*&#x2A; tabs &#x2A;(crosshair icon)* to the right of the workspace.
Modify the text and block style as you wish: change typography, size, text color, add a colored background to the block...

:nuxt-img{.w-full alt="Creating a Text button in Touchify Studio" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-bouton-texte.webp"}

::tip
Discover the full range of 

[text](https://help.touchify.io/../touchify-studio/elements/texts)

 and 

[block](https://help.touchify.io/../touchify-studio/elements/background-and-borders)

 tools in the dedicated articles.
::

### Step 2: Transform into component

First, make sure that **all elements of your future area** are gathered on your page, arranged in the desired location.
**Some elements must overflow**, so that the scrolling area is visible in its entirety; leave in the page the elements that will appear as priority.

![Example of content ready to be converted into scrolling component](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-exemple.webp)

Select all your elements then right-click: choose the &#x2A;*"Transform into component"** option in the window.

Name your component and modify its parameters in the **configuration window*&#x2A;. Dimensions and position are entered automatically, you don't need to modify them.
Once configuration is complete, click the &#x2A;*"Validate"** button.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Action to transform a selection into component](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-transformer.webp)
![Component creation form](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-formulaire.webp)
::

### Step 3: Configure the component

The component is automatically **inserted in the page, at the location where it was created**.
Adjust its size to fit the page dimensions: surplus elements must now be invisible, **hidden in the component block**.

To allow scrolling, select the component then access the windows in the &#x2A;*"Element Customization"*&#x2A; tab &#x2A;(crosshair icon)&#x2A; in the right sidebar:
in the &#x2A;*"Component"** window, select the *Scrolling* display mode.

![Configure scrolling mode on a component](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-config.webp)

::note
You can modify your component at any time: select it then click the 

**"Edit"**

 button 

*(pencil icon)*

 in the customization window, to the right of the workspace.


:br

:br


You can also access the component management space: in the bottom menu of the 

**"Pages"**

 window, to the left of the workspace, click the 

**"Component"**

 button 

*(C icon)*

.
Select your component to modify it.


:br

:br


To return to the project pages, click the 

**"Project pages"**

 button 

*(page icon)*

 in the same menu.
::

### Step 4: Preview

To preview the project, click the &#x2A;*"Preview"** button at the top left of the workspace. This mode will allow you to visualize and test the scrolling area you just created.

:nuxt-img{alt="Preview button in Touchify Studio" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-preview.webp"}

To exit the mode, click the &#x2A;*"Close"** button at the top right of the window.

:nuxt-img{alt="Preview close button in Touchify Studio" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-preview-fermer.webp"}

## Automatic scrolling options

While classic scrolling is triggered by interaction, automatic scrolling plays independently.
To activate this option, click the &#x2A;*"Element Customization"*&#x2A; tab &#x2A;(target icon)&#x2A; in the right menu then expand the &#x2A;*"Scrolling Options"** window.

:nuxt-img{alt="Automatic scrolling options" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-defilement-auto.webp" width="450"}

1. Choose the scrolling speed
2. Set the scrolling activation delay
3. Modify the scrolling type: return to beginning, reverse scrolling, continuous scrolling, entrance and exit
4. Visualize the scrolling you just configured

::note
Automatic scrolling can be applied to all elements mentioned at the beginning of the article, as well as to web browsers
::

:nuxt-img{.w-full alt="Demonstration of automatic scrolling in Touchify" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-demo.webp"}

## Scrolling examples:

:nuxt-img{.w-full alt="Example of scrolling bird content" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-exemple-oiseaux.webp"}:br:nuxt-img{alt="Example of scrolling menu content" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-exemple-menu.webp" width="400"}:br:nuxt-img{.w-full alt="Example of scrolling panorama content" provider="none" src="https://help.touchify.io/5-tips-tricks/3-interactive-image/fr-tips-image-exemple-panorama.webp"}

::note
Learn how to create an interactive image in 

[the dedicated article](https://help.touchify.io/interactive-image)
::


# Tutorial: external data integration

## Video tutorial: data integration in Touchify Studio

:iframe{allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen="true" frameBorder="0" height="315" referrerPolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/zW_Dfmgxp3M?si=Cm7ugJjwdYZZNA6C" title="YouTube video player" width="560"}


# Introduction

## Our Guides

::card-group
  :::card
  ---
  icon: i-lucide-credit-card
  title: Create an API Key for Payment Terminals in Stripe
  to: https://help.touchify.io/en/guides/stripe-terminal
  ---
  Learn how to accept payments in Touchify by connecting your Stripe payment terminals.
  :::
::


# Create an API key for payment terminals in Stripe

## Introduction

Touchify allows you to link your Stripe account to collect payments via Stripe terminals on touch kiosks.

Let's examine your account configuration to get a valid and secure API key.

## Connect to your Stripe account

To begin, you need to go to the Stripe administration portal: <https://dashboard.stripe.com>{rel="nofollow"}

In your account, you need to navigate to the **Developers** section by clicking the link at the top right of your screen.

In the **Developers** section, click on the **API keys** tab.

## Create a restricted API key

::note
To ensure your security, it is important not to share your account's main secret key.
Touchify allows you to work with a limited set of permissions to guarantee your account security.
::

To begin, click the **Create restricted key** button. In the confirmation popup, choose **Provide this key to another website** then click **Continue**.

:nuxt-img{.mx-auto alt="Selecting restricted key type in Stripe" src="https://help.touchify.io/6-guides/2-stripe-terminal/fr-guides-stripe-cle-type.webp" width="400"}

In the form, enter a name for your key (*for example: Touchify&#x2A;), enter our website URL: &#x2A;<https://touchify.io>{rel="nofollow"}*, then check the **Customize permissions for this key** box.
Then click **Continue** to customize your permissions.

:nuxt-img{.mx-auto alt="Creating a restricted key in Stripe" src="https://help.touchify.io/6-guides/2-stripe-terminal/fr-guides-stripe-cle-limitee.webp" width="400"}

We will now configure the most limited set of permissions possible:

- In the **Core Resources** section, click **None** to disable all permissions. Then click **Write** on the **PaymentIntents** resource.
- In the **Checkout Resources** section, click **None**.
- In the **Billing Resources** section, click **None**.
- In the **Connect Resources** section, click **None**.
- In the **Orders Resources** section, click **None**.
- In the **Issuing Resources** section, click **None**.
- In the **Reporting Resources** section, click **None**.
- In the **Webhooks Resources** section, click **Write**.
- In the **Stripe CLI Resources** section, click **None**.
- In the **All Payment Links Resources** section, click **None**.
- In the **All Terminal Resources** section, click **Write**.
- In the **Tax** section, click **None**.
- In the **Radar** section, click **None**.
- In the **All Climate Resources** section, click **None**.

Finally, click **Create key** to generate your secret key. You will then find your secret key on the **API keys** page.

You can click **Reveal secret key** to display the key and click on it to copy it to your clipboard.


# Touchify Applications

## Rooms Manager

::card-group
  :::card
  ---
  icon: i-lucide-rectangle-ellipsis
  title: Connect to Administration
  to: https://help.touchify.io/en/applications/rooms-manager/login
  ---
  Learn how to connect to Rooms manager with your administrator account.
  :::

  :::card
  ---
  icon: i-lucide-hotel
  title: Site Management
  to: https://help.touchify.io/en/applications/rooms-manager/sites
  ---
  Learn how to create and manage sites to organize your meeting rooms.
  :::

  :::card
  ---
  icon: i-lucide-ratio
  title: Meeting Room Management
  to: https://help.touchify.io/en/applications/rooms-manager/meeting-rooms
  ---
  Learn how to create and configure your meeting rooms in Rooms manager.
  :::

  :::card
  ---
  icon: i-lucide-users
  title: User Management
  to: https://help.touchify.io/en/applications/rooms-manager/users
  ---
  Learn how to create and manage users who can book your meeting rooms in Rooms Manager.
  :::

  :::card
  ---
  icon: i-lucide-ticket-check
  title: Book a Room for a User
  to: https://help.touchify.io/en/applications/rooms-manager/booking
  ---
  Learn how to book a room for a user from the Rooms Manager administration.
  :::
::


# Connect to administration

## Access the Rooms Manager platform

To access the Rooms manager platform, you can use the following link: <https://admin.roomsmanager.app/>{rel="nofollow"&#x7D; or
directly your organization's link &#x2A;[https://admin.roomsmanager.app/{my-organization}](https://admin.roomsmanager.app/%7Bmy-organization%7D){rel="nofollow"}*.

You will then be redirected to the Touchify login page, to connect, use your usual Touchify credentials.

![User login to administration](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-login.webp)

::note
**Note:**

:br


To connect, please use your credentials used when registering with Touchify.
::

## Dashboard

You have arrived at the Rooms Manager administration portal.

The home page corresponds to your activity dashboard. On this page you will find a summary of your organization as well as a global view of reservations over the last 30 days.

![Rooms Manager administration dashboard](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-dashboard.webp)

On the left, a menu allows you to access the different administration sections of your Rooms Manager space:

- **Rooms:** Create or manage your meeting rooms ([learn more](https://help.touchify.io/meeting-rooms)).
- **Sites:** Create or manage your organization's sites ([learn more](https://help.touchify.io/sites)).
- **Users:** Create or manage users who can reserve rooms ([learn more](https://help.touchify.io/users)).
- **Administrators:** Import or manage your administrators and their rights.
- **Organization:** Configure your organization's settings.

::note
**Note:**

:br


You can also access the different sections by clicking on the number of sites, rooms or users in the Dashboard.
::


# Site management

::note
**What is a Site?**

:br

:br


In Rooms Manager, sites allow you to organize your meeting rooms and users. Each site contains meeting rooms that inherit its configuration. Additionally, when you add users, you can define which sites they have the right to reserve rooms in.


:br

:br


A site can correspond to a floor, geographical area, city (as in the example), building...
::

## Manage sites

To access your site list, click on the **Sites** section in the menu on the left of the screen.

You can then click on one of the tiles to configure your site.

![Site list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites.png)

## Create a site

To create a site, press the blue **Create site** button at the top right of the screen.

![Site list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites.png)

In the form, fill in the different sections concerning the site you want to create then click the **Save** button at the top right of the screen.

The mandatory information is:

- **Site name:** public name of this site for your users.
- **Time zone:** determines in which time zone reservations should be recorded.

![Site creation form in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites-creer.webp)

You can also configure reservation rules for this site:

- **Duration unit:** determines the duration unit for reservations. For example, if the duration unit is 30 minutes, reservations can be positioned at 10:00, 10:30, 11:00... and can have durations of 30m, 1h, 1h30m, 2h...
- **Minimum duration:** determines the minimum duration of reservations. By default, this option corresponds to the duration unit.
- **Maximum duration:** determines the maximum duration of reservations. By default, no maximum is defined.
- **Opening hours:** determines the days and time slots during which it is possible to reserve slots on this site.

::note
**Note:**

:br


By default, this information is inherited from your organization's configuration.
::

## Configure a site

After finishing creating a site, you are redirected to the site page. &#x2A;(You can also navigate to this page from the site list)*.

On this page, you can upload an image to customize its appearance in the user application. To modify the site image, click on the box on the right of the screen.

![Site configuration page in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites-page.webp)

You can also find all information about your site through the tabs:

- **Configuration:** View and modify reservation rules.
- **Profile:** View and modify the site's name, time zone or description.
- **Rooms:** View and add meeting rooms to this site.
- **Users:** View the list of users who have access to this site.

::note
**Note:**

:br


After any modification, remember to click the Save button to apply them.
::

## Conclusion

Back on the Sites section, your new site is created and available in the list.

![Site list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites-liste.webp)


# Meeting room management

## Room list

When you are on the Rooms manager administration portal, click on the **Rooms** section in the left menu to access your meeting room list.

![Meeting room list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms.png)

## Create a meeting room

To create a meeting room, start by clicking the **Create a room** button.

::caution
**Warning:**

 If you have configured multiple sites, multiple buttons will be available. Click on the button corresponding to the site in which you want to create the meeting room.
::

![Meeting room list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms.png)

In the creation form, fill in the different information then click the **Save** button at the top right of the screen.

The mandatory information is:

- **Room name:** defines the public name of the room for your users.
- **Room site:*&#x2A; determines the site that hosts the meeting room. &#x2A;(This field is usually pre-filled according to your choice on the previous page)*.

You can also configure your page's public profile &#x2A;(this information will be visible to users)*:

- **Room capacity:** defines the maximum number of people allowed in this room.
- **Room description:** defines a short description of the room.
- **Equipment:*&#x2A; determines the list of equipment available in this room &#x2A;(enter the equipment name then click "Enter" or "Tab" to add it to the list)*.

::note
**Note:**

:br


Providing precise data allows users to get an accurate description of the room they want to reserve.
::

![Meeting room creation form in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms-creer.png)

You can also configure reservation rules for this site:

- **Duration unit:** determines the duration unit for reservations. For example, if the duration unit is 30 minutes, reservations can be positioned at 10:00, 10:30, 11:00... and can have durations of 30m, 1h, 1h30m, 2h...
- **Minimum duration:** determines the minimum duration of reservations. By default, this option corresponds to the duration unit.
- **Maximum duration:** determines the maximum duration of reservations. By default, no maximum is defined.
- **Opening hours:** determines the days and time slots during which it is possible to reserve slots on this site.

::note
**Note:**

:br


By default, this information is inherited from your organization's configuration.
::

## Configure a meeting room

After finishing creating a meeting room, you are redirected to the room page. &#x2A;(You can also navigate to this page from the room list)*.

![Meeting room configuration page in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms-page.png)

On this page, you can notably upload an image to customize its appearance in the user application. To modify the meeting room image, click on the box on the right of the screen.

The image uploads instantly, your room is customized!

![Loading an image for a meeting room in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms-image.png)

From this page, you can also find all information about your meeting room through the tabs:

- **Reservations:** View and modify room reservations.
- **Configuration:** View and modify reservation rules for the room.
- **Profile:** View and modify the room's name, description, capacity or equipment.

::note
**Note:**

:br


After any modification, remember to click the Save button to apply them.
::

## Your room is created!

It appears in the meeting room list in the **Rooms** section.


# User management

::tip
**What is a User?**

:br


In Rooms Manager, users are entities that have the right to reserve slots in your meeting rooms.
They should not be confused with Administrators who are entities that can administer sites and meeting rooms.
::

## User list

When you arrive on the Rooms Manager platform, to access your user list, click on the **Users** section in the main menu on the left.

![User list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users.webp)

::note
Note: the images are only representative examples
::

## Create a user

To create a new user, click the blue **Create user** button at the top right of the screen.

![User list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users.webp)

In the creation form, fill in the different sections concerning your new user then click the **Save** button at the top right of the screen.

The mandatory information is:

- **User name:*&#x2A; determines the user's display name &#x2A;(this information is public and visible to other users, for example, when clicking on a reserved slot)*.
- **User email:** defines the user's email. This email will serve as the login identifier on the web and mobile application.
- **Authorized sites:** determines the site(s) in which the user will have the right to reserve meeting rooms.

You can also define profile information for the user.

![User creation form in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-creer.png)

::caution
**Warning:**

 it is important to define the authorized sites. Without this, the user will not be able to reserve slots on tablets and applications.
::

## Reservation code

After saving, you get the user's reservation code. This code is very important, it is with this that the user will be able to reserve slots on tablets or identify themselves on web and mobile applications.

::caution
**Warning:**

 the reservation code is displayed only once. Remember to copy it and send it to your user.
::

![User reservation code in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-code.png)

After closing the reservation code window, your new user is created and available in the user list.

![User list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-liste.png)

## Configure a user

From the user list, you can click on a list item to access its configuration.

![User login page in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-page.webp)

On this page, you can modify the user's name, email or photo. You can also access the rest of their configuration via the tabs:

- **Profile:** view and modify the user's profile information
- **Sites:** select the sites in which the user can reserve rooms.

::tip
**Note:**

:br


After any modification, remember to click the Save button to apply them.
::

## Reset the reservation code

From the user configuration page, you can **reset their reservation code**. To do this, click the Reset code button at the top right of the page.

![Resetting a user's reservation code in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-code-reset.png)

::caution
**Warning:**

 the reservation code is displayed only once. Remember to copy it and send it to your user.
::


# Reserve a room for a user

## Portal access

When you arrive on the Rooms Manager platform, a menu appears on the left with several sections: **Rooms**, **Sites**, **Users**, **Administrators** and **Organization**.

To reserve a room, start by navigating to the **Rooms** section then click on the room in which you want to place your reservation (in our example this will be the **Touch Room**).

![Meeting room list in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-rooms.png)

You will then be redirected to the management page of the selected room. On this page, you will find all the information concerning the room as well as a schedule allowing you to reserve a time slot.

![Meeting room page in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-room.png)

## Select a time slot

To reserve a time slot in your room, start by selecting the date on which you want to position your reservation then click on the start and end times.

![Selecting a time slot in a meeting room in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-select.png)

Continue by choosing the user who will be assigned to this reservation then click the &#x2A;*"Confirm reservation"** button.

![Selecting a time slot in a meeting room in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-confirm.png)

## Reservation confirmation

Your reservation is taken into account immediately and communicated to all connected tablets.

It appears in red on the schedule indicating that this time slot is properly assigned. The meeting room will therefore no longer be available for this time slot.

![Selecting a time slot in a meeting room in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-finished.png)


# Book a Room from the Tablet

## Accessing the Tablet

When you access the room booking tablet, you choose the room you want to book and then select the time slot that suits you (in our example, it will be the Touch room).

![Home screen of the room booking tablet in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-home.webp)

::note
**Note:**

 The example above shows a meeting room. You can choose from several meeting rooms.
::

## Choosing a Time Slot

You can either tap the purple "Book a slot" button or select the date and slot directly at the bottom of the screen. The orange color indicates the start time of the meeting you are about to schedule.

![Choosing a time slot on the room booking tablet in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-creneau.webp)

To complete your booking, you must enter your user code. This code consists of six digits.

![Keypad to enter the booking code on the room booking tablet in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-code.webp)

## Booking Confirmation

Your booking is immediately taken into account and communicated to all connected tablets.

![Booking confirmation on the room booking tablet in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-confirm.webp)

When you check the booking schedule for your room, your booking appears in "red," indicating that this slot is now assigned. The meeting room will no longer be available at this time.

![Display of the reserved slot on the room booking tablet in Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-fin.webp)

::tip
You can also cancel your booking from the tablet by tapping the slot and then entering your booking code.
::


# Book a Room from the Mobile App

## Book a Room

### Access on the Phone

You can book a meeting room remotely from your mobile phone. Simply log in to the Rooms Manager app with your credentials.

:nuxt-img{alt="Login in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-login.png" width="200"}

### Choosing the Meeting Room

Once logged in, choose your room (in our example, the Touch room) by clicking "book a slot."

:nuxt-img{alt="Selecting a room in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-salle.webp" width="200"}

### Choosing the Date and Time

Select the desired date on the calendar and click it. You can also choose the month by clicking the arrow at the top right.

:nuxt-img{alt="Selecting the date in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-date.webp" width="200"}

Next is the second step: choosing the time slot. The times shown in green are available. Click your preferred time and the duration of your meeting.

:nuxt-img{alt="Selecting the time slot in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-creneau.webp" width="200"}

The third step displays the date and time of your booking. Click "confirm my booking" (green button).

:nuxt-img{alt="Booking confirmation in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-details.webp" width="200"}

### Booking Confirmation

Your booking is processed and communicated to all devices.

:nuxt-img{alt="Booking confirmation popup in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-confirm.webp" width="200"}

## Cancel a Booking

### Entry Portal

When you log in to the Rooms Manager app, you arrive at the entry portal with the booking sites you have access to (in our example, it's the Touchify company with its 2 sites).

:nuxt-img{alt="Home page of the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-home.webp" width="200"}

### Cancel My Booking

To cancel your booking, click the "my account" icon at the top right, then click "my bookings."

:nuxt-img{alt="User menu in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-user.webp" width="200"}

Your bookings appear and you can cancel the one you want (in our example, it's the ICONE Marseille booking). Click the "trash" icon on the right.

:nuxt-img{alt="My bookings in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-reservations.webp" width="200"}

A window appears asking you to confirm the cancellation of your booking. Click the purple "cancel booking" button.

:nuxt-img{alt="Booking cancellation confirmation in the Rooms Manager mobile app" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-annulation.webp" width="200"}

**Done! The slot you booked no longer appears in "my bookings."**

::note
**Note:**

 As soon as you no longer see your meeting room booking in "my bookings," consider it as confirmation of cancellation.
::


# Documentation Touchify

::u-page-hero
#title
Documentation Touchify

#description
Découvrez comment utiliser les différentes fonctionnalités de Touchify dans cette base de connaissance.

#links
  :::u-button
  ---
  color: neutral
  size: xl
  to: https://help.touchify.io/fr/getting-started/introduction
  trailing-icon: i-lucide-arrow-right
  ---
  Commencer
  :::
::

::u-page-section
  :::card-group
    ::::card
    ---
    icon: i-lucide-waypoints
    title: Premiers pas
    to: https://help.touchify.io/fr/getting-started/introduction
    ---
    Un guide pas à pas pour prendre en main Touchify Studio et réaliser votre premier projet.
    ::::
  
    ::::card
    ---
    icon: i-lucide-vector-square
    title: Touchify Studio
    to: https://help.touchify.io/fr/touchify-studio/introduction
    ---
    Découvrez les outils de création mis à votre disposition dans Touchify Studio.
    ::::
  
    ::::card
    ---
    icon: i-lucide-rss
    title: Touchify Publisher
    to: https://help.touchify.io/fr/touchify-publisher/introduction
    ---
    Découvrez comment diffuser vos contenus sur vos écrans.
    ::::
  
    ::::card
    ---
    icon: i-lucide-app-window
    title: Touchify Player
    to: https://help.touchify.io/fr/touchify-player/introduction
    ---
    Comment installer et configurer l'application Touchify Player sur vos appareils.
    ::::
  
    ::::card
    ---
    icon: i-lucide-life-buoy
    title: Tips & Tricks
    to: https://help.touchify.io/fr/tips-tricks/introduction
    ---
    Retrouvez les bonnes pratiques et les secrets de la plateforme Touchify.
    ::::
  
    ::::card
    ---
    icon: i-lucide-message-circle-question-mark
    title: Guides et conseils
    to: https://help.touchify.io/fr/guides/introduction
    ---
    Une serie d'articles pour vous aider à concevoir des projets dynamiques et interactifs de qualités.
    ::::
  
    ::::card
    ---
    icon: i-lucide-blocks
    title: Applications
    to: https://help.touchify.io/fr/applications/introduction
    ---
    Les applications Touchify, entièrement compatibles avec la plateforme et fonctionnant de manière autonome ou intégrées.
    ::::
  :::

#title
Livré avec de nombreuses fonctionnalités
::


# Introduction

Bienvenue sur **Touchify**, le logiciel qui anime tous vos écrans.

## Qu'est-ce que Touchify ?

Touchify est une plateforme de création d'applications interactives et dynamiques.
Elle permet de concevoir des expériences utilisateur engageantes sur tous types d'écrans, qu'il s'agisse de kiosques, de tablettes ou de moniteurs d'affichage dynamique.

## Concepts importants

Touchify s'appuie sur trois points importants :

::u-page-columns
  :::u-page-card
  ---
  description: Touchify fonctionne sur tout type d'écrans, qu'il soit tactile ou
    dynamique, et s'adapte à toutes les résolutions.
  title: Universel
  ---
  :::

  :::u-page-card
  ---
  description: Touchify intègre un éditeur visuel puissant pour créer des
    expériences interactives et dynamique sans coder.
  title: Créatif
  ---
  :::

  :::u-page-card
  ---
  description: Touchify offre une solution tout-en-un pour la création
    d'applications interactives, avec des fonctionnalités avancées pour tous les
    types d'écrans.
  title: Complet
  ---
  :::
::

## Fonctionnalités clés

Touchify offre de nombreuses fonctionnalités importantes pour gérer tous vos projets interactifs et d'affichage dynamique :

- **Touchify Studio** : Créer des expériences dynamiques et interactives rapidement et simplement.
- **Gestion centralisée** : Contrôlez tous vos écrans à distance à partir d'une interface unique.
- **Mode hors-ligne** : Vos contenus fonctionnent sans connexion internet.
- **Gestion des équipes** : Fonctionnalité de gestion des équipes pour une collaboration simplifiée.
- **Connectivité avancée** : Connectez vos contenus à toutes sortes de sources de données externes.
- **Périphériques externes** : Faîtes vivre vos contenus grâce à l'intégration de senseurs, imprimantes, TPE...
- **Analytics** : Mesurez la performance de vos contenus grâce à des outils d'analyse intégrés.


# Créer un projet

## Accéder à la plateforme

::note
Touchify est accessible en ligne, à partir de n'importe quel navigateur. Assurez-vous d'être connecté à internet lorsque vous souhaitez l'utiliser.
::

### Connexion

Rendez-vous sur le site web [touchify.io](https://touchify.io){rel="nofollow"&#x7D; et cliquez sur le bouton &#x2A;*"Se connecter"** en haut de la page.
Vous pouvez également taper l'adresse [touchify.app](https://touchify.app){rel="nofollow"} directement dans la barre de recherche de votre navigateur.

Entrez vos identifiants.

> Si votre profil est lié à plusieurs comptes, sélectionnez d'abord celui dans lequel vous souhaitez travailler.

![Page de connexion](https://help.touchify.io/1-getting-started/2-create-project/connexion.webp)

## Création du projet

Vous arrivez sur la page dédiée à vos projets.

S'il s'agit de votre première connexion, cliquez sur le bouton &#x2A;*"Créer mon premier projet"**.

![Page de première connexion](https://help.touchify.io/1-getting-started/2-create-project/fr-premiere-connexion-home.webp)

Si vous avez déjà accès à plusieurs projets, cliquez sur le bouton &#x2A;*"Créer un nouveau projet"** situé en haut à droite de la section.

![Page de projets](https://help.touchify.io/1-getting-started/2-create-project/fr-page-projets-creer.webp)

### Type de projet

Plusieurs paramètres sont à définir lorsque vous créez un nouveau projet.

Trois types de projet vous sont suggérés : chacun d'entre eux permet d'optimiser les fonctionnalités que vous utiliserez dans le Studio.

![Type de projets](https://help.touchify.io/1-getting-started/2-create-project/fr-creer-type-projets.webp)

- **Affichage interactif :** offre un large choix d'interactions différentes et permet de personnaliser les fonctionnalités du projet en profondeur
- **Affichage dynamique :** approfondi les fonctionnalités d'enchainement automatique, conditions et transitions de page
- **Présentation dynamique :** adapté aux projets de type présentation, possibilité d'exporter en format PDF

### Résolution

Le format de votre projet est entièrement personnalisable.

Une large liste de dimensions vous sont proposées, classées par résolution ou par type d'appareil ; le cas échéant, entrez les dimensions souhaitées en cliquant sur le bouton de droite &#x2A;*"Personnaliser"**.

![Sélecteur de résolution](https://help.touchify.io/1-getting-started/2-create-project/fr-creer-resolution.webp)

### Options de classement

Vous pouvez classer votre projet dans une équipe ou dans un dossier dès sa création.

La fonction &#x2A;*"Équipe"** gère l'accessibilité au projet : ce dernier ne pourra être vu ou modifié que par les membres de l'équipe sélectionnée.

La fonction &#x2A;*"Dossier"** permet simplement de classer vos projets dans différentes catégories.

![Sélecteur d'équipes et de dossier](https://help.touchify.io/1-getting-started/2-create-project/fr-creer-equipes-dossier.webp)

Une fois ces paramètres définis, cliquez sur le bouton &#x2A;*"Créer le projet"**.

::note
Vos choix ne sont pas irréversibles. Ils peuvent être modifiés dans la page du projet ou dans ses paramètres.
::

## Félicitation, votre projet a été créé !

Touchify Studio s'est ouvert dans une nouvelle fenêtre. L'interface de création du Studio vous permettra d'intégrer du contenu et de personnaliser le fonctionnement de votre projet.


# Interface Touchify Studio

Cette interface de création comporte de nombreux outils, panneaux et options vous permettant de donner vie à votre contenu.

![Interface de Touchify Studio](https://help.touchify.io/1-getting-started/3-studio-ui/fr-studio-interface.webp)

::steps{level="4"}
#### Insertion

Le menu latéral de gauche permet d'insérer tous types d'élément : texte, image, vidéo... Importez des documents depuis votre appareil ou découvrez des éléments construits par Touchify.

#### Panneau des pages

Il s'agit du panneau contenant l'arborescence de votre projet. C'est ici que vous pouvez créer, visualiser ou hiérarchiser vos différentes pages.

#### Panneau des éléments

Les éléments qui composent votre page sont classés dans ce panneau. Vous pouvez modifier leur positionnement (arrière-plan, premier plan...), les bloquer et les masquer à partir des boutons rangés à droite du panneau.

#### Aperçu et publication

L'aperçu présente le projet en situation de fonctionnement : utilisez-le pour tester les interactions et animations appliquées à vos éléments.
Pour partager votre projet, utilisez le bouton de publication. Cette fonction permet de générer des liens, ainsi que d'importer le projet dans l'application Touchify Player.

#### Panneau d'édition

Le panneau et le menu latéral de droite sont entièrement dédiés à la personnalisation. Vous y trouverez les caractéristiques de vos textes, de vos images et même de la page globale.

:nuxt-img{alt="Onglets du panneau d'édition" src="https://help.touchify.io/1-getting-started/3-studio-ui/fr-studio-edition-onglets.webp" width="300"}

#### Zoom et repères

Utilisez les boutons du menu inférieur pour zoomer, dézoomer ou encore appliquer des repères sur la zone de travail. Générez une image de votre page grâce au bouton de capture.
::


# Créer un contenu interactif

::note
Prérequis : 

**créer un projet**

:br


Cet article aborde la création de contenu. Pour apprendre à créer la base de votre projet, 

[lisez l'article précédent](https://help.touchify.io/2.create-project)

.
::

## Créer une page

Cliquez sur le bouton &#x2A;*"Ajouter une page"** dans le panneau des pages, à gauche de l'interface.
Toujours dans le panneau, renommez cette page en double-cliquant dessus ou en effectuant **clic droit*&#x2A; > &#x2A;*"Renommer"**.

::div{.grid.sm:grid-cols-2.gap-4.max-w-full}
![Créer une page](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-bouton-page.webp)
![Renommer une page](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-renommer.webp)
::

Pour modifier la position d'une page dans l'arborescence, **maintenez un clic gauche et faites glisser la page** à l'emplacement souhaité. Une surbrillance bleue indiquera l'endroit où votre page sera déposée.

:nuxt-img{alt="Déplacement d'une page" provider="none" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-deplacer-page.webp" width="350"}

Pour créer une catégorie, cliquez sur le bouton "Créer une catégorie". Cette fonction permet de classer vos pages selon une logique de dossiers.

## Ajouter un élément

**Texte :*&#x2A; sélectionnez le bouton &#x2A;*"Texte"** dans le menu d'insertion, à gauche de l'interface. Choisissez l'un des styles prédéfinis ou cliquez dans la zone de travail pour créer un bloc de texte neutre.

**Forme :*&#x2A; sélectionnez le bouton &#x2A;*"Forme"** dans le menu d'insertion, puis choisissez une forme parmi la liste proposée.

**Image :*&#x2A; sélectionnez le bouton &#x2A;*"Image"** dans le menu d'insertion, puis cliquez sur l'image que vous souhaitez ajouter.

:nuxt-img{alt="Créer un texte" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-creer-texte.webp" width="500"}

::note
Pour ajouter vos documents à la galerie du projet, appuyez sur le bouton "Importez" ou glissez-déposez vos fichiers dans la fenêtre dédiée.
::

:nuxt-img{alt="Importer une image" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-importer-image.webp" width="500"}

## Personnaliser l'élément

Le panneau de droite est entièrement dédié à la personnalisation. Vous y trouverez les options de couleur, de taille, de position ou encore de traitement typographique pour les textes.

Cliquez sur l'élément pour que le panneau en affiche les options.

![Sélection d'un élément](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-select-element.webp)

## Modifier l'élément

Cliquez sur ce nouveau bloc et utilisez les pastilles blanches pour modifier la taille de l'élément.

Cliquez sur le bouton &#x2A;*"Modifier"** (pictogramme crayon) pour changer le contenu du bloc.

Cliquez sur le bouton orange &#x2A;*"Interaction"** pour ajouter une interaction à l'élément.

:nuxt-img{alt="Modification d'un élément" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-modifier-element.webp" width="500"}

## Ajouter des interactions

Chaque élément peut devenir interactif.

Choisissez un élément puis cliquez sur le bouton orange &#x2A;*"Interaction"*&#x2A;, ou sur le bouton identique dans le menu latéral de droite.
Cliquez sur le bouton &#x2A;*"Appliquer une interaction"** pour déplier la liste des options et sélectionnez le type d'interaction de votre choix.

:nuxt-img{alt="Ajout d'une interaction" src="https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-interaction.webp" width="350"}

La modification ou la suppression de cette interaction se fera dans la même fenêtre.

Notez qu'il est possible d'appliquer plusieurs interactions différentes sur un même élément (navigation, fenêtre, manipulation…) et de choisir le déclencheur pour chacune d'entre elles.

## Prévisualiser

Cliquez sur le bouton &#x2A;*"Aperçu"** pour lancer la prévisualisation. Vous pourrez ainsi tester votre projet, ses interactions, son ergonomie, et visualiser les transitions ou animations appliquées à vos éléments.

Pour quitter le mode aperçu, cliquez sur la croix en haut à gauche de la console.

![Prévisualisation du contenu](https://help.touchify.io/1-getting-started/4-create-interactive-content/fr-interactif-previsualisation.webp)


# Créer un affichage dynamique

::note
Prérequis : 

**créer un projet**

:br


Cet article aborde la création de contenu. Pour apprendre à créer la base de votre projet, 

[lisez l'article précédent](https://help.touchify.io/2.create-project)

.
::

## Activation

Si, lors de la création de votre projet, vous avez choisi le type Affichage Dynamique, votre présentation s'ouvrira automatiquement sur l'onglet Playlist.

Si, lors de la création de votre projet, vous avez choisi le type Affichage Interactif, votre présentation s'ouvrira automatiquement sur l'onglet Design. L'onglet Playlist se trouve juste à côté, dans le menu supérieur du Studio.

:nuxt-img{alt="Onglet Playlist" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-onglet.webp" width="500"}

Sélectionnez cet onglet : un panneau d'activation vous sera présenté, afin de régler les paramètres généraux de votre affichage.
Choisissez le délai d'inactivité, l'action lancée à la fin de ce dernier ainsi que les options relatives à vos choix précédents, puis cliquez sur le bouton "Valider".

![Paramètres de la playlist](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-parametres.webp)

Si vous souhaitez changer de type de votre projet pour l'optimiser, cliquez sur l'onglet **Paramètres** > **Projet** puis sélectionnez le type de votre choix.

![Type de projet](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-type-projet.webp)

## Créer une playlist

Une playlist vide est créée par défaut. Vous pouvez l'utiliser directement ou en créer une nouvelle.

Pour créer une nouvelle playlist, cliquez sur le bouton &#x2A;*"Playlist"*&#x2A; en haut du menu latéral gauche. Dans le nouveau panneau Playlist, appuyez sur le bouton &#x2A;*"Ajouter une playlist"**.

:nuxt-img{alt="Créer une playlist" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-creer.webp" width="450"}:br:nuxt-img{alt="Ajouter une playlist" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-ajouter.webp" width="450"}

Une fois votre playlist créée, sélectionnez dans le menu de gauche le type de contenu que vous souhaitez y ajouter : image, vidéo, document, page...

Si vous intégrez une page, vous pouvez la modifier dans l'**onglet Design*&#x2A;. Un bouton &#x2A;*"Ouvrir dans Design"** est prévu à cet effet, en bas de la zone de travail.

::div{.grid.sm:grid-cols-3.gap-4.max-w-full}
![Ajouter un élément](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-ajouter-element.webp)
![Ouvrir dans Design](https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-ouvrir-design.webp){.sm:col-span-2}
::

## Configuration

Personnalisez les paramètres d'affichage dans le panneau de droite : durée, page de destination en cas d'interaction, transitions...

:nuxt-img{alt="Panneau d'édition" src="https://help.touchify.io/1-getting-started/5-create-signage-content/fr-playlist-panneau-edition.webp" width="350"}

Le menu latéral de droite permet d'accéder à trois sections différentes :

- La section Options de l'élément, pour modifier l'élément de la playlist sélectionné
- La section Transition de l'élément, pour ajuster les animations de transition
- La section Options de la playlist, permettant de personnaliser les paramètres précédents de manière globale

::note
Pour modifier les conditions globales d'inactivité, retournez au niveau du panneau playlists et cliquez sur le bouton 

**"Paramètres d'inactivité"**

.
::


# Publier et diffuser

## Publication

### Via le Studio

Cliquez sur le bouton orange &#x2A;*"Publier"*&#x2A; dans le menu supérieur du studio, à côté du bouton &#x2A;*"Aperçu"**.
Patientez jusqu'à la fin du chargement : une notification apparaitra pour annoncer la publication.

![Bouton Publier](https://help.touchify.io/1-getting-started/6-publish/fr-publier-bouton.webp)

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Publication en cours](https://help.touchify.io/1-getting-started/6-publish/fr-publier-chargement.webp)
![Publication réussie](https://help.touchify.io/1-getting-started/6-publish/fr-publier-succes.webp)
::

### Via la page Projet

Depuis la page principale &#x2A;*"Mes Projets"*&#x2A;, cliquez sur le titre de la présentation que vous souhaitez publier puis sélectionnez le bouton orange &#x2A;*"Publier"**.

Vous recevrez une notification lorsque le chargement sera terminé.

![Publier depuis la page projet](https://help.touchify.io/1-getting-started/6-publish/fr-publier-page-projet.webp)

### Partage Web

Le projet peut être partagé en lien privé. Cliquer sur l'onglet &#x2A;*"Partage"** dans la page projet puis cliquer sur le bouton "Créer une URL privée

Copiez le lien présenté pour le partager.

![Onglet partage dans la page projet](https://help.touchify.io/1-getting-started/6-publish/fr-publier-partage.webp)

![Bouton créer une URL privée](https://help.touchify.io/1-getting-started/6-publish/fr-publier-creer-url-privee.webp)

## Touchify Player

L'application Touchify Player permet d'afficher les contenus Touchify sur un ordinateur. Elle est compatible avec les principaux systèmes d'exploitation (Windows, Linux, Android, iOS...).

Deux modes d'authentification sont disponibles :

- **Compte utilisateur :** ordinateur, tablette ou téléphone personnel
- **Clé de déploiement :** écran autonome sécurisé et piloté avec Touchify Publisher

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Connexion à Touchify Player en utilisant son compte utilisateur](https://help.touchify.io/1-getting-started/6-publish/fr-publier-player-utilisateur.webp)
![Connexion à Touchify Player en utilisant une clé de déploiement](https://help.touchify.io/1-getting-started/6-publish/fr-publier-player-cle.webp)
::

![Page d'accueil dans Touchify Player](https://help.touchify.io/1-getting-started/6-publish/fr-publier-player-home.webp)

::note
Téléchargez l'application sur la page dédiée 

["Télécharger Touchify Player"](https://get.touchify.io){rel="nofollow"}

. 

:br


Pour plus d'informations, consultez les 

[guides d'installation](https://help.touchify.io/fr/touchify-player/installation/introduction)

 ou 

[contactez le support](https://www.touchify.io/fr/support){rel="nofollow"}

.
::


# Introduction

## Les principaux éléments

::card-group
  :::card
  ---
  icon: i-lucide-case-sensitive
  title: Les textes
  to: https://help.touchify.io/fr/touchify-studio/elements/texts
  ---
  Ajoutez du texte et personnalisez les polices et les caractères.
  :::

  :::card
  ---
  icon: i-lucide-image-play
  title: Les fichiers et médias
  to: https://help.touchify.io/fr/touchify-studio/elements/media
  ---
  Comment insérer des images et autres médias dans Touchify.
  :::

  :::card
  ---
  icon: i-lucide-square-dashed-top-solid
  title: Arrière-plan et bordures
  to: https://help.touchify.io/fr/touchify-studio/elements/background-and-borders
  ---
  Personnalisez vos éléments en utiliant les styles de boite.
  :::

  :::card
  ---
  icon: i-lucide-sparkle
  title: Les formes
  to: https://help.touchify.io/fr/touchify-studio/elements/drawing
  ---
  Dessinez des formes dans vos contenus Touchify.
  :::
::

## Les interactions

::card-group
  :::card
  ---
  icon: i-lucide-fingerprint
  title: Introduction aux interactions
  to: https://help.touchify.io/fr/touchify-studio/interactions/introduction
  ---
  Que sont les interactions et à quoi servent-elles ?
  :::

  :::card
  ---
  icon: i-lucide-navigation
  title: La navigation
  to: https://help.touchify.io/fr/touchify-studio/interactions/navigation
  ---
  Ajouter de la navigation dans vos contenus Touchify.
  :::

  :::card
  ---
  icon: i-lucide-fullscreen
  title: La manipulation
  to: https://help.touchify.io/fr/touchify-studio/interactions/manipulation
  ---
  Donnez vie à vos éléments en les manipulant avec les doigts.
  :::

  :::card
  ---
  icon: i-lucide-message-square-text
  title: Les fenêtres
  to: https://help.touchify.io/fr/touchify-studio/interactions/dialogs
  ---
  Créez des fenêtres contextuelles dans vos contenus Touchify.
  :::
::

## Les animations

::card-group
  :::card
  ---
  icon: i-lucide-bring-to-front
  title: Introduction aux animations
  to: https://help.touchify.io/fr/touchify-studio/animations/introduction
  ---
  Comment donner vie à vos contenus en utilisant les animations ?
  :::

  :::card
  ---
  icon: i-lucide-columns-3-cog
  title: Personnaliser une animation
  to: https://help.touchify.io/fr/touchify-studio/animations/customize
  ---
  Créer des animations fluides et pertinentes en personnalisant les options.
  :::

  :::card
  ---
  icon: i-lucide-clipboard-clock
  title: Les storyboards
  to: https://help.touchify.io/fr/touchify-studio/animations/storyboards
  ---
  Apprenez à contrôler les storyboards pour créer différents scénarios d'animations.
  :::
::


# Les textes

## Insérer un texte

Dans un premier temps, cliquez sur le bouton &#x2A;*"Insérer un texte"*&#x2A; &#x2A;(pictogramme T)* dans le menu d'insertion, à gauche de l'interface. Une fenêtre vous proposant différents styles de texte s'ouvrira.

### Méthode 1 : *click*

Cliquez sur le style de texte que vous souhaitez ajouter : un nouveau bloc apparaîtra en haut à gauche de votre page. &#x2A;*"Texte"** y sera inscrit en tant que repère.

:nuxt-img{alt="Insérer un texte en cliquant" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-inserer-click.webp"}

### Méthode 2 : *draw*

Maintenez le clic gauche et tracez votre bloc n'importe où dans la page. Tapez votre texte dès que la boîte apparaît : tout bloc de texte vide est supprimé une fois désélectionné.

:nuxt-img{alt="Insérer un texte en traçant" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-inserer-draw.webp"}

### Méthode 3 : *drag & drop*

Glissez-déposez le style de votre choix dans votre page : un nouveau bloc apparaîtra là où vous relâcherez le clic. "Texte" y sera inscrit en tant que repère

:nuxt-img{alt="Insérer un texte en drag & drop" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-inserer-dragdrop.webp"}

::caution
**Rappel :**

 tout bloc de texte vide est supprimé une fois désélectionné.
::

## Personnaliser le texte

Pour mettre en forme votre texte, sélectionnez l'élément pour afficher les options de &#x2A;*"Personnalisation de l'élément"*&#x2A; &#x2A;(pictogramme viseur)* du menu latéral droit.
Le panneau d'édition montrera les options de personnalisation.

### Édition et mise en forme

::u-page-card
---
orientation: horizontal
reverse: "true"
variant: naked
---
![Panneau d'édition des textes](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-panneau-edition.webp)

#description
1. Éditez le texte dans le panneau Édition *(ou en double-cliquant sur le bloc de texte)*
2. Modifiez la typographie, la taille et la couleur des caractères
3. Appliquez graisse, italique, soulignage, surlignage...
4. Maîtrisez la justification de votre texte
::

::note
Pour ajouter votre typographie, cliquez sur le bouton déroulant des polices et appuyez sur le bouton 

[+]

 

**"Ajouter"**

, en haut à droite de la fenêtre.


:br

:br


Vous pouvez également importer vos polices dans la section 

**"Ma marque"**

 de votre profil.
::

### Panneaux d'édition ou édition de bloc ? Quelle différence ?

Il existe deux façons de personnaliser votre texte.

**Via le panneau d'édition :** cette méthode, évoquée plus haut, permet de modifier un élément texte dans sa globalité. Tous les caractères du bloc sélectionné seront modifiés.

**Via l'édition du bloc :** lorsque vous éditez le contenu de votre élément texte, un bandeau de personnalisation apparaît. Il n'affecte pas le bloc entier mais seulement les caractères que vous avez sélectionnés.
Cette méthode permet, par exemple, d'appliquer une couleur et une graisse aux mots importants.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Barre d'outils en édition de bloc](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-toolbar.webp)
![Modification d'une partie d'une texte](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-toolbar-edit.webp)
::

### Options avancées

Modifiez des paramètres plus poussés dans la sous-section &#x2A;*"Options avancées"*&#x2A; du panneau &#x2A;*"Mise en forme"** :

::u-page-card
---
orientation: horizontal
reverse: "true"
variant: naked
---
![Panneau d'édition avancé](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-panneau-edition-avance.webp)

#description
1. Modifiez l'espace entre les lettres pour aérer ou condenser le paragraphe
2. Maîtriser l'espace entre les lignes
3. Appliquez un décalage de type alinéa en début de paragraphe
4. Si votre texte dépasse du bloc, autorisez l'utilisateur à faire défiler le texte
5. Séparez un même élément texte en plusieurs colonnes
6. Marquez les caractères d'une ombre portée
::

### Style des paragraphes

Cette sous-section contient les paramètres de paragraphe : ils sont **complémentaires à la mise en forme du texte tout en étant autonomes**.
Par exemple, vous pouvez modifier l'espace entre les paragraphes indépendamment de l'espace entre les lignes.

:nuxt-img{.w-full.bg-[white] alt="Exemples de styles de paragraphes" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-paragraphes-exemples.webp"}

Plusieurs outils sont disponibles pour personnaliser vos paragraphes :

:nuxt-img{alt="Edition de styles de paragraphes" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-paragraphes-edition.webp" width="450"}

1. Choisissez une couleur de fond
2. Appliquez un contour
3. Arrondissez les angles de la zone de paragraphe
4. Ajoutez une ombre portée
5. Définissez une marge interne
6. Gérez les marges externes

## Arrière-plan et bordures

Au-delà du contenu textuel, le bloc en lui-même est personnalisable. Le panneau &#x2A;*"Arrière-plan et bordures"** contient différentes options.

:nuxt-img{alt="Edition de styles de boite" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-boite.webp" width="350"}

1. Appliquez une couleur de fond
2. Ajoutez un contour sur la ou les bordures de votre choix
3. Arrondissez le ou les angles de votre choix
4. Générez une ombre portée
5. Définissez une marge interne

::note
Cette fonctionnalité modifie l'élément en tant que tel. Par conséquent, elle existe pour tous les types d'élément : image, vidéo, document, menu, fenêtre...


[Rendez-vous sur l'article dédié pour mieux comprendre les arrière-plans.](https://help.touchify.io/fr/touchify-player/elements/background-and-borders)
::

::caution
**Rappel :**

 les marges, fonds et contours décrits ici ne sont pas les mêmes que ceux de la sous-section 

**"Style des paragraphes"**
::

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full.bg-[white]}
![Comparaison styles de paragraphes et styles de boites](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-vs-paragraphes.webp)
![Comparaison styles de boites et styles de paragraphes](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-vs-boites.webp)
::

## Les styles

Pour faciliter la personnalisation de vos textes, utilisez la fonctionnalité **Styles** : enregistrez votre personnalisation et appliquez-la en un clic sur vos nouveaux éléments.

::note
Les fonctionnalités suivantes sont illustrées par des styles de texte, mais notez que les styles de boîte et de fenêtre fonctionnent de la même manière.
Vous pouvez utiliser ces astuces sur 

**tous les types de style**

.
::

### Appliquer un style

Dans le panneau &#x2A;*"Mise en forme"*&#x2A;, cliquez sur le bouton &#x2A;*"Style"** : choisissez un style de texte parmi la liste proposée. Votre élément adoptera la mise en forme du style sélectionné.

![Sélection d'un style de texte](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-select.webp)

### Enregistrer un style

Vous venez de personnaliser un texte et souhaitez garder ce style en mémoire.

Cliquez sur le bouton &#x2A;*"Ajouter un style"*&#x2A; à droite du bouton déroulant &#x2A;*"Style"** et notez le nom que vous souhaitez attribuer à ce nouveau style. Il s'appliquera automatiquement sur votre élément sélectionné.

:nuxt-img{alt="Ajouter un style de texte" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-ajouter.webp" width="350"}

### Aller plus loin

Vous avez modifié un élément et souhaitez enregistrer ces modifications dans le style appliqué.

Sélectionnez l'élément, puis cliquez sur le bouton &#x2A;*"Enregistrer"*&#x2A; à côté du bouton déroulant &#x2A;*"Style"**. Les modifications seront automatiquement prises en compte par tous les autres éléments portant ce style.

:nuxt-img{alt="Enregistrer un style de texte" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-enregistrer.webp" width="350"}

Vous pouvez aussi modifier vos styles depuis l'onglet &#x2A;*"Style"**, dans le menu supérieur du Studio.

:nuxt-img{alt="Onglet de styles" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-onglet.webp" width="450"}

Personnalisez tous vos textes en modifiant le **Style par défaut** : il définit les paramètres des textes n'ayant pas de style appliqué. Il sert également de base à tous les autres styles.

![Style par défaut](https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-defaut.webp)

Les styles sont classés par catégories. Cherchez la catégorie du style que vous souhaitez modifier dans le panneau de gauche, puis **sélectionnez-le pour le personnaliser** à la racine.

Les modifications seront prises en compte par tous les autres éléments portant ce style.

:nuxt-img{alt="Catégories de styles" src="https://help.touchify.io/2-touchify-studio/2-elements/1-texts/fr-studio-texts-styles-categories.webp" width="350"}


# Les fichiers et médias

## Importer et insérer

### Importer

Touchify Studio est une interface vous permettant de créer votre contenu à partir de vos propres ressources : textes, images, vidéos, documents...
Vous devez donc importer ces ressources dans le Studio avant de pouvoir les mettre en forme.

L'explorateur de fichier stocke et classe vos médias.
Vous pouvez y déposer quatre différents types de fichiers : &#x2A;*image, vidéo, audio, PDF...**
Dépliez le menu de gauche en cliquant sur le [+&#x5D; orange &#x2A;*"Insérer"*&#x2A;, rendez-vous dans l'espace correspondant au fichier que vous souhaitez ajouter puis cliquez sur le bouton orange &#x2A;*"Importer"**.
Vous pouvez aussi utiliser la technique du **drag & drop**.

![Importation de médias](https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-import.webp)

### Insérer

Une fois votre ressource enregistrée dans le Studio, insérez-la dans votre page.

#### Méthode 1 : *click*

Sélectionnez la ressource que vous souhaitez ajouter puis cliquez sur le [+&#x5D; orange &#x2A;*"Ajouter"** : le fichier apparaitra à l'échelle, en haut à gauche de votre page.

:nuxt-img{alt="Insérer un media en cliquant" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-click.webp"}

#### Méthode 2 : *drag & drop*

Depuis l'explorateur, glissez-déposez la ressource de votre choix dans votre page : elle apparaîtra à l'échelle, là où vous relâcherez le clic.

:nuxt-img{alt="Insérer un media en le glissant-déposant" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-dragdrop.webp"}

#### Méthode 3 : *sélection multiple*

Il est possible d'insérer plusieurs fichiers à la fois.

Dans l'explorateur, cliquez sur le bouton &#x2A;*"Sélection multiple"*&#x2A; &#x2A;(pictogramme check)* puis sélectionnez les fichiers de votre choix.
Cliquez sur le bouton [+&#x5D; &#x2A;*"Ajouter"** en haut à droite de la fenêtre, ou utilisez la technique du **drag & drop** pour tout insérer dans la page.

:nuxt-img{alt="Sélection multiple de médias" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-multi.webp" width="450"}

::note
**Astuce :**

:br


Utilisez votre clavier pour sélectionner plusieurs fichiers à la fois.
Sélectionnez les ressources que vous souhaitez insérer en maintenant la touche 

**Shift (A > B)**

 ou 

**Ctrl (A+B)**

.
::

:nuxt-img{alt="Insérer plusieurs médias en les glissant-déposant" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-ajout-multi-kbd.webp"}

## fonctionnalités

### Classer

Pour créer un dossier dans l'explorateur, cliquez sur le bouton &#x2A;*"Créer un dossier"*&#x2A; &#x2A;(pictogramme dossier)* en haut de la fenêtre.
Le dossier sera généré dans la section (image, vidéo..) où vous vous trouvez.

:nuxt-img{alt="Sélection multiple de médias" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-creer-dossier.webp" width="450"}

Pour modifier l'aperçu de vos fichiers, cliquez sur l'un des icônes en bas à droite de la fenêtre : sélectionnez l'affichage en **grille** ou en **liste** selon votre préférence.

Pour retrouver un fichier précis, utilisez la **barre de recherche** en haut à droite de la fenêtre : tapez le nom de la ressource que vous recherchez.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Voir les médias en vue liste](https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-vue-liste.webp)
![Rechercher des médias](https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-rechercher.webp)
::

### Modifier

Pour renommer un fichier dans l'explorateur, **sélectionnez simplement son titre** : lorsque le curseur de texte apparaît, inscrivez le nouveau. Appuyez sur la **touche Entrée** pour valider.

Pour supprimer un fichier, sélectionnez-le dans l'explorateur puis cliquez sur le bouton &#x2A;*"Supprimer"*&#x2A; &#x2A;(pictogramme corbeille)*.

Pour afficher les détails du fichier (type, taille, date d'import...), sélectionnez-le puis cliquez sur le bouton &#x2A;*"Détails"*&#x2A; &#x2A;(trois petits points)*.

:nuxt-img{alt="Sélection d'un média" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-selection.webp" width="450"}:br:nuxt-img{alt="Détails d'un média" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-details.webp" width="450"}

### Déplacer

Pour modifier l'emplacement d'un fichier ou d'un dossier, utilisez la méthode **drag & drop** : maintenez le clic gauche puis faites glisser votre ressource à l'endroit de votre choix.

:nuxt-img{alt="Déplacement d'un média en le glissant" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-deplacement.webp"}

## Fichiers du compte et fichiers du projet : quelle différence ?

Deux types de galeries vous sont proposés dans le Studio : les fichiers du compte et les fichiers du projet. Bien qu'ils soient accessibles depuis le même endroit, ces explorateurs sont différents.

:nuxt-img{alt="Sources de médias" src="https://help.touchify.io/2-touchify-studio/2-elements/2-media/fr-studio-media-sources.webp" width="300"}:br

#### Fichiers du compte :

Les ressources que vous y importez sont liées à votre compte Touchify. Elles seront disponibles dans tous vos projets.

#### Fichiers du projet :

Les ressources que vous y importez sont liées au projet. Elles sont exclusives à celui-ci et ne seront pas visibles dans vos autres projets, sauf si vous les cherchez dans la galerie "Autres projets".

#### Autres projets :

Cette galerie regroupe les ressources importées dans tous vos projets. Vous pouvez y retrouver les fichiers disponibles dans toutes les galeries "Fichier du projet".

#### Logos :

Importez vos logos et images de marque dans la section de profil "Ma marque". Elles apparaitront dans tous vos projets.


# Arrière-plan et bordures

## Description du panneau

Comme tous les panneaux rangés à droite de l'interface, &#x2A;*"Arrière-plan et bordures"** contient un ensemble d'outils permettant de personnaliser l'élément sélectionné.

:nuxt-img{alt="Section d'arrière-plan et bordures" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-section.webp" width="450"}

1. Appliquez une couleur de fond
2. Ajoutez un contour sur la ou les bordures de votre choix
3. Arrondissez le ou les coins de votre choix
4. Générez une ombre portée
5. Définissez une marge interne

## Le fond

Modifiez le fond de votre élément en sélectionnant le pictogramme &#x2A;*"Arrière-plan"** (1). Cliquez sur la pastille de couleur pour choisir une nouvelle teinte, puis réglez l'opacité grâce au curseur.

:nuxt-img{alt="Configurer l'arrière-plan de la page" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background.webp"}

::tip
Vous souhaitez 

**enregistrer la couleur que vous venez de créer ?**

:br


Cliquez sur le bouton 

**"Ajouter"**

 dans la fenêtre des couleurs, en dessous de la palette. Entrez le nom de votre nouvelle couleur et validez.
::

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Ajouter une couleur à la palette](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background-ajouter.webp)
![Nommer une couleur dans la palette](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background-ajouter-nommer.webp)
::

## Les masques

La forme d'un élément peut être modifiée au moyen d'un masque.

Dans la sous-section &#x2A;*"Arrière-plan"*&#x2A;, cliquez sur l'option &#x2A;*"Ajouter un masque"** et sélectionnez la forme que vous souhaitez donner à votre élément.

::div{.mt-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![Listes de formes utilisables pour les masques](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-mask-formes.webp)
![Configurer un masque pour un élément](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-mask-config.webp){.sm:col-span-2 provider="none"}
::

Personnalisez les paramètres du masque dans la même sous-section.

Pour changer de forme, supprimez le masque actuel en cliquant sur le bouton &#x2A;*"Supprimer le masque"*&#x2A; &#x2A;(pictogramme corbeille)* puis créez-en un nouveau de la même manière.

::note
Transformez votre contour en masque grâce à l'interrupteur 

**"Appliquer le masque sur la bordure"**

 disponible dans l'onglet 

**"Bordure"**

.
Appliquez d'abord un masque dans 

**"Arrière-plan"**

 pour utiliser cette fonction.
::

## Les bordures

Pour ajouter un contour à votre élément, cliquez sur le bouton &#x2A;*"Bordures"** (2). Choisissez une épaisseur de ligne et une couleur ; vous pouvez aussi appliquer un type de ligne comme des pointillés, des tirets...

:nuxt-img{alt="Styles de bordures" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-style.webp" width="400"}

Traitez vos bordures au cas-par-cas en les déverrouillant. Cliquez sur le pictogramme &#x2A;*"Déverrouiller"** (cadenas) pour afficher les contours indépendamment. Modifiez-les selon votre besoin.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Configuration séparée des bordures](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-separes.webp)
![Exemple de configuration séparée des bordures](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-separes-exemple.webp){.sm:self-end}
::

## Les bords arrondis

Pour modifier les bords arrondis de votre élément, cliquez sur le bouton &#x2A;*"Bords arrondis"** (3). Choisissez l'intensité d'arrondi souhaité.

:nuxt-img{alt="Configuration des bords arrondis" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-radius-config.webp" width="400"}

Traitez les coins de votre élément au cas-par-cas en les déverrouillant. Cliquez sur le pictogramme &#x2A;*"Déverrouiller"** (cadenas) pour modifier les angles indépendamment.

![Configuration séparée des bords arrondis](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-radius-separes.webp)

## L'ombre portée

Pour ajouter une ombre portée à votre élément, sélectionnez le bouton &#x2A;*"Ombre"*&#x2A; (4). Cliquez sur le pictogramme &#x2A;*"Ajouter"** puis ajustez les paramètres de l'ombre à votre convenance.

:nuxt-img{alt="Configuraiton des ombres portées" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-shadow-config.webp" width="400"}

- La barre couleur / opacité fonctionne de la **même manière que pour la couleur d'arrière-plan**
- ΔX et ΔY définissent le **décalage de l'ombre** sur les axes X et Y
- Le flou **modifie la diffusion** de l'ombre ; l'étendu **affecte son intensité**
- L'ombre se trouve, par défaut, à l'extérieur de l'élément ; il est possible de l'appliquer à l'intérieur grâce à la fonction &#x2A;*"Ombre vers l'intérieur"**.

![Ombre portée et ombre intérieure](https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-shadow-interieur.webp)

## Les marges internes

Pour appliquer des marges internes à votre élément, cliquez sur le bouton &#x2A;*"Marges intérieures"** (5). Choisissez la taille de vos marges en pixels.

Cliquez sur le pictogramme &#x2A;*"Déverrouiller"** (cadenas) pour modifier les marges indépendamment.

:nuxt-img{alt="Exemple d'application de marge intérieure" src="https://help.touchify.io/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-padding-exemple.webp" width="550"}

::note
**Rappel :**

:br

:br


Vous pouvez reproduire votre personnalisation grâce aux styles. Cliquez sur le bouton 

**"Ajouter un style"**

 à côté du bouton déroulant 

**"Style"**

 pour enregistrer la mise en forme : appliquez ce style à d'autres éléments pour les modifier en un clic.


:br

:br


Pour plus de détails, jeter un œil à l'article 

[Personnalisation des textes](https://help.touchify.io/texts#les-styles)

, rubrique 

**"Les styles"**

.
::


# Les formes

## Tracer

Cliquez sur le bouton "Insérer une forme" dans le menu d'insertion à gauche de l'interface.
Une fenêtre contenant la liste des formes disponibles s'ouvrira.

:nuxt-img{alt="Panneau d'insertion des formes" src="https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-panneau.webp" width="500"}

### Méthode 1 : *drag & drop*

Glissez-déposez la forme de votre choix dans votre page : elle apparaîtra là où vous relâcherez le clic.

:nuxt-img{alt="Insertion d'une forme dans la page" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-insertion-click.webp"}

### Méthode 2 : dessiner

Sélectionnez la forme de votre choix, puis maintenez le clic gauche et tracez un bloc n'importe où dans la page. Une forme aux dimensions du bloc apparaîtra lorsque vous relâcherez le clic.

:nuxt-img{alt="Insertion d'une forme dans la page en dessinant" provider="none" src="https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-insertion-draw.webp"}

## Personnaliser

### Couleur et contour

Cliquez sur votre élément puis sur le bouton &#x2A;*"Personnalisation de l'élément"*&#x2A; dans le menu à droite de l'interface. Personnalisez la couleur de fond et de bordure dans le panneau &#x2A;*"Couleur et contour"**.

![Personnalisation du contour d'une forme](https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-contour.webp)

Cliquez sur les pastilles de couleur pour modifier la teinte ; faites glisser le curseur pour **ajuster l'opacité**.

Modifiez la taille du contour et l'arrondi des angles selon vos besoins.

::caution
La personnalisation d'éléments importés (texte, image...) permet de modifier les différents contours et angles de manière indépendante.
Les formes n'ont pas cette fonctionnalité : 

**les contours et angles ne peuvent pas être séparés**

.
::

### Angle et orientation (optionnel)

Certaines formes peuvent être personnalisées en détail : nombre de branches pour une étoile, degré d'inclinaison pour un trapèze...
Ces paramètres sont modifiables dans le panneau &#x2A;*"Personnaliser"*&#x2A;, juste au-dessus de &#x2A;*"Couleur et contour"**.

![Personnalisation d'un trapèze](https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-config-trapeze.webp)

![Personnalisation d'une étoile](https://help.touchify.io/2-touchify-studio/2-elements/4-drawing/fr-studio-drawing-config-etoile.webp)


# Introduction

## Appliquer une interaction

Sélectionnez votre élément puis cliquez sur le bouton &#x2A;*"Interactions sur l'élément"*&#x2A; &#x2A;(pictogramme touch)&#x2A; dans le menu latéral droit. Cliquez sur le bouton &#x2A;*"Ajouter une interaction"**.

Dans la liste proposée, choisissez l'action que cet élément déclenchera lorsque l'utilisateur interagira avec lui.

:nuxt-img{alt="Panneau d'insertion des interactions" src="https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-panneau.webp" width="350"}

Un onglet de paramètres sera créé pour chaque interaction ajoutée.

En effet, il est possible d'appliquer plusieurs interactions sur un même élément : pour éviter les conflits, veillez à choisir un **déclencheur** différent pour chacune d'entre elles.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Panneau des interactions avec une seule interaction](https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-panneau-unique.webp)
![Panneau des interactions avec plusieurs interactions](https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-panneau-multiple.webp)
::

## Les déclencheurs

Le déclencheur détermine la manière dont l'utilisateur peut interagir avec l'objet.

Sélectionnez l'interaction puis cliquez sur le panneau &#x2A;*"Déclencheur"** : déroulez le bouton et choisissez parmi les options proposées.

:nuxt-img{alt="Déclencheurs d'interaction" src="https://help.touchify.io/2-touchify-studio/3-interactions/1-introduction/fr-studio-interactions-declencheurs.webp" width="350"}

- **Touch :** touchez (ou cliquez) pour activer
- **Double touch :** touchez deux fois (ou double-cliquez) pour activer
- **Multiple touch :** choisissez le nombre de touch (ou de clics) nécessaire à l'activation de l'action
- **Appui long :** maintenez un touch (ou un clic) pour activer
- **Balayage (uniquement pour écrans tactiles) :** balayez l'écran dans la direction de votre choix pour déclencher l'action
- **Clavier ou télécommande :** reliez les boutons d'un périphérique (clavier, télécommande...) au déclencheur

::note
Bien que cet article prenne les interactions d'éléments comme exemple, il est possible de rendre l'ensemble de la page interactive.


:br

:br


Cliquez sur le bouton 

**"Interactions sur la page"**

 

*(pictogramme touch / page)*

 dans le menu latéral droit.
Les mêmes fonctionnalités vous seront proposées, à la différence que les 

**déclencheurs seront appliqués à la page entière et non à un élément ciblé**

.
::


# Navigation

## Appliquer une interaction

Pour ajouter une navigation à un élément, sélectionnez ce dernier puis cliquez sur le bouton &#x2A;*"Interactions sur l'élément"*&#x2A; &#x2A;(pictogramme touch)&#x2A; dans le menu latéral droit de l'interface. Choisissez l'interaction &#x2A;*"Navigation"**.

Pour ajouter une navigation à la page, cliquez sur le bouton &#x2A;*"Interactions sur la page"*&#x2A; &#x2A;(pictogramme touch / page)&#x2A; dans le menu latéral droit de l'interface. Choisissez l'interaction &#x2A;*"Navigation"**.

::note
Pour en savoir plus sur les interactions, 

[rendez-vous sur l'article dédié](https://help.touchify.io/introduction)

.
::

## Options de navigation

L'onglet &#x2A;*"Naviguer vers"** permet de choisir la page de destination.

:nuxt-img{alt="Listes des pages de votre contenu" src="https://help.touchify.io/2-touchify-studio/3-interactions/2-navigation/fr-studio-navigation-pages.webp" width="300"}

- **Pages :** ciblez une page de l'arborescence
- **Pages spéciales :** ciblez un niveau ou une section de votre arborescence. Par exemple, cette option peut s'avérer utile si vous désirez créer des boutons "Page suivante" et "Page précédente".


# Manipulation

## Introduction

L'interaction **Manipulation** permet une manipulation tactile multipoint : elle inclue le déplacement, le zoom et la rotation des éléments.

Elle peut être appliquée à **n'importe quel élément interactif** : photo, texte, forme, video...

::note
Le nombre de points de contact simultanés sur un ou plusieurs éléments dépend du nombre de points supportés par le matériel utilisé.
::

## Manipulation simple

Pour ajouter une interaction &#x2A;*"Manipulation"*&#x2A; à un élément, sélectionnez ce dernier puis cliquez sur le bouton &#x2A;*"Interactions sur l'élément"*&#x2A; &#x2A;(pictogramme touch)* dans le menu latéral droit de l'interface.
Choisissez l'interaction dans la liste proposée.

:nuxt-img{alt="Insertion d'une interaction Manipulation" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-insertion.webp" width="300"}

Dès que l'interaction est ajoutée, l'élément peut être manipulé. Visualisez les paramètres par défaut en cliquant sur le bouton &#x2A;*"Aperçu"** en haut à droite de l'interface.
La fenêtre de prévisualisation apparaît : elle permet de tester votre projet en situation réelle.

:nuxt-img{.w-full alt="Démonstration de l'interaction Manipulation" provider="none" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-demo.webp"}

## Options générales

:nuxt-img{alt="Options de l'interaction Manipulation" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-options.webp" width="350"}

Tous les paramètres de manipulation se personnalisent en détail :

- **La translation** désigne la manipulation de l'élément de gauche à droite et de bas en haut. En désactivant la translation, l'élément ne pourra pas être déplacé dans la page. Vous pouvez également choisir de bloquer cette fonction sur l'axe X (horizontal) ou sur l'axe Y (vertical) uniquement.
- **Le zoom** autorise l'agrandissement ou le rétrécissement de l'élément. Contrôlez la taille maximum et minimum de l'objet en modifiant les valeurs proposées. Désactivez cette option en cliquant sur l'interrupteur.
- **La rotation** n'est pas une option personnalisable, mais elle peut être désactivée au même titre que les autres.

:nuxt-img{.w-full alt="Démonstration de l'interaction Manipulation" provider="none" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-demo2.webp"}

## Options de slowdown

:nuxt-img{alt="Option de continuation du mouvement" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-slowdown.webp" width="300"}

Lorsqu'il est lâché, un élément manipulable peut continuer son mouvement pendant quelques instants.
Cette option de ralentissement est personnalisable dans la **fenêtre des options avancées**, en dessous des options de translation.

::div{.mt-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![Manipulation avec slowdown léger](https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-slowdown-leger.webp){.sm:col-span-2 provider="none"}


≫ Ralentissement léger

![Manipulation avec slowdown fort](https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-slowdown-fort.webp){.sm:col-span-2 provider="none"}


≫ Ralentissement très fort
::

## Options de manipulation intérieure

Chaque élément se compose d'une ressource affichée dans un bloc. En ce sens, il est possible d'appliquer la manipulation à la ressource seulement :
activez la fonction &#x2A;*"Manipuler l'intérieur de l'élément"** pour que la ressource soit manipulable indépendamment du bloc.

:nuxt-img{alt="Options Manipulation intérieure" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-interieure.webp" width="350"}

En utilisant cette option, vous pouvez maitrisez ta taille et la position initiale de la ressource interne. L'élément lui-même ne sera pas modifié, seulement sont aspect et son interactivité.

:nuxt-img{.w-full alt="Démonstration de l'interaction Manipulation intérieure" provider="none" src="https://help.touchify.io/2-touchify-studio/3-interactions/3-manipulation/fr-studio-manipulation-interieure-demo.webp"}


# Les fenêtres

## Appliquer une interaction

Pour ajouter une interaction "fenêtre", sélectionnez votre élément puis cliquez sur le bouton &#x2A;*"Interactions sur l'élément"*&#x2A; &#x2A;(pictogramme touch)&#x2A; dans le menu latéral droit de l'interface.
Choisissez l'interaction &#x2A;*"Fenêtre texte"*&#x2A;, &#x2A;*"Fenêtre web"*&#x2A; ou &#x2A;*"Fenêtre personnalisée"**.

Pour ajouter une fenêtre à la page, cliquez sur le bouton &#x2A;*"Interactions sur la page"*&#x2A; &#x2A;(pictogramme touch / page)&#x2A; dans le menu latéral droit de l'interface.
Choisissez l'interaction &#x2A;*"Fenêtre texte"*&#x2A;, &#x2A;*"Fenêtre web"*&#x2A; ou &#x2A;*"Fenêtre personnalisée"**.

## Fenêtre texte

Créez une fenêtre textuelle s'affichant après une interaction. De nombreuses options de personnalisation s'offrent à vous, mais **elles reposent pour la plupart sur des fonctionnalités courantes** du Studio.

:nuxt-img{alt="Options de l'interaction Fenêtre Texte" src="https://help.touchify.io/2-touchify-studio/3-interactions/4-dialogs/fr-studio-dialogs-text-panneau.webp" width="350"}

- **Déclencheur :** Choisissez de quelle manière la fenêtre sera activée (pour en savoir plus sur les déclencheurs, rendez-vous sur [l'article dédié aux interactions](https://help.touchify.io/introduction#les-d%C3%A9clencheurs))
- **Contenu de la fenêtre :** insérez le texte que vous souhaitez faire apparaître dans la fenêtre
- **Dimensions :** définissez la taille de la fenêtre
- **Position :** choisissez la position de la fenêtre dans la page
- **Options de fermeture :** choisissez quelle action refermera la fenêtre
- **Personnalisation du texte :** mettez votre texte en forme (pour en savoir plus, rendez-vous sur [l'article dédié à la personnalisation des textes](https://help.touchify.io/../elements/texts))
- **Personnalisation de la fenêtre :** modifiez le style de votre fenêtre (pour en savoir plus, rendez-vous sur [l'article dédié à l'arrière-plan et aux bordures](https://help.touchify.io/../elements/background-and-borders))

## Fenêtre web

Créez une fenêtre contenant une page web. Définissez l'accès, les dimensions, le style...

:nuxt-img{alt="Options de l'interaction Fenêtre Web" src="https://help.touchify.io/2-touchify-studio/3-interactions/4-dialogs/fr-studio-dialogs-web-panneau.webp" width="350"}

- **Déclencheur :** Choisissez de quelle manière la fenêtre sera activée (pour en savoir plus sur les déclencheurs, rendez-vous sur [l'article dédié aux interactions](https://help.touchify.io/introduction#les-d%C3%A9clencheurs))
- **URL du site internet :** insérez le lien de la page que vous souhaitez afficher dans la fenêtre
- **Sécurité :** modifiez les options d'accès à votre page
- **Dimensions :** définissez la taille de la fenêtre
- **Position :** choisissez la position de la fenêtre dans la page
- **Options de fermeture :** choisissez quelle action refermera la fenêtre
- **Personnalisation de la fenêtre :** modifiez le style de votre fenêtre (pour en savoir plus, rendez-vous sur [l'article dédié à l'arrière-plan et aux bordures](https://help.touchify.io/../elements/background-and-borders))

## Fenêtre personnalisée

Créez une fenêtre personnalisée à partir d'un composant.

::caution
**Rappel :**

 créez votre composant avant de l'intégrer à une fenêtre.
::

:nuxt-img{alt="Options de l'interaction Fenêtre personnalisée" src="https://help.touchify.io/2-touchify-studio/3-interactions/4-dialogs/fr-studio-dialogs-custom-panneau.webp" width="350"}

- **Déclencheur :** Choisissez de quelle manière la fenêtre sera activée (pour en savoir plus sur les déclencheurs, rendez-vous sur [l'article dédié aux interactions](https://help.touchify.io/introduction#les-d%C3%A9clencheurs))
- **Composant :** choisissez le composant qui s'affichera dans la fenêtre
- **Propriétés :** si le widget possède des propriétés, modifiez ces dernières pour le personnaliser
- **Dimensions :** définissez la taille de la fenêtre
- **Position :** choisissez la position de la fenêtre dans la page
- **Options de fermeture :** choisissez quelle action refermera la fenêtre
- **Personnalisation de la fenêtre :** modifiez le style de votre fenêtre (pour en savoir plus, rendez-vous sur [l'article dédié à l'arrière-plan et aux bordures](https://help.touchify.io/../elements/background-and-borders))


# Introduction

## Animation d'élément

Pour animer un élément, sélectionnez-le puis cliquer sur le bouton &#x2A;*"Animation"*&#x2A; &#x2A;(pictogramme rebondissement)* dans le menu latéral de droite.
Le panneau s'ouvrira sur la **liste des animations** : sélectionnez celle que vous souhaitez appliquer à l'élément puis modifiez ses paramètres (durée, courbe de vitesse...) dans le nouveau panneau **Animations de l'élément**.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Liste des animations disponibles](https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-liste.webp)
![Panneau des animations avec une animation sélectionnée](https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-intro.webp)
::

::caution
**Attention :**

 vous pouvez appliquer plusieurs animations à un même élément, mais certains conflits peuvent apparaître si les animations se déclenchent en même temps.


**Décalez leur timer**

 

*(pictogramme horloge)*

 pour éviter les bugs d'affichage.
::

## Type d'animation

Les animations sont séparées en quatre familles. Chacune correspond à un type d'utilisation décrit ci-dessous.

::note
L'animation Opacité a été choisie pour illustrer cet article ; vous pouvez choisir d'autres animations dans votre projet.
::

### Apparition

Ces animations sont pensées pour l'apparition des éléments, à l'ouverture de la page.

:nuxt-img{.w-full alt="Démonstration de l'animation de type Apparition" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-apparition.webp"}

### Disparition

En parallèle de la section "Apparition", cette liste concerne les animations de sortie.

:nuxt-img{.w-full alt="Démonstration de l'animation de type Disparition" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-disparition.webp"}

### Transformation

Ces animations modifient la position, la taille ou encore la transparence de l'élément sur le long terme.

:nuxt-img{.w-full alt="Démonstration de l'animation de type Transformation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-transformation.webp"}

### Animation d'appel

Ces animations sont pensées comme des boucles, afin de pouvoir être répétées pour attirer l'attention de l'utilisateur.

:nuxt-img{.w-full alt="Démonstration de l'animation de type Animation d'appel" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-cta.webp"}

## Transitions entre les pages

Appliquez des animations de page pour fluidifier la navigation.

Cliquez sur le bouton &#x2A;*"Transition entre les pages"*&#x2A; &#x2A;(pictogramme page / rebond)* dans le menu latéral de droite.
Choisissez les animations de votre choix : apparition et disparition de page sont indépendantes.

*Les panneaux étant déjà classés par type d'animation, vous ne retrouverez pas les quatre familles proposées pour les animations d'éléments.*

:nuxt-img{alt="Transitions de pages" src="https://help.touchify.io/2-touchify-studio/4-animations/1-introduction/fr-studio-anim-transitions.webp" width="350"}


# Personnaliser une animation

::note
**Prérequis :**

 appliquer une animation à votre élément ou à votre page. Pour en savoir plus, consultez 

[l'introduction aux animations](https://help.touchify.io/introduction)
::

## Temps

Définissez le **moment d'apparition*&#x2A; &#x2A;(pictogramme horloge)* et la **durée de votre animation*&#x2A; &#x2A;(pictogramme chronomètre)*. Modifiez la **courbe de vitesse** pour ajuster le mouvement de votre élément.

::div{.my-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![Définition du temps d'une animation](https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-temps.webp)
![Définition de la courbe de vitesse d'une animation](https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-courbe.webp){.sm:col-span-2}
::

:nuxt-img{.w-full alt="Démonstration de la courbe de vitesse d'une animation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-courbe-demo.webp"}

::caution
**Attention :**

 vous pouvez appliquer plusieurs animations à un même élément, mais des conflits peuvent apparaître si les animations se déclenchent en même temps.


**Décalez leur timer**

 

*(pictogramme horloge)*

 pour éviter les bugs d'affichage.
::

## Effets

:nuxt-img{alt="Options d'effets d'une animation" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-effets.webp" width="350"}

### Zoom et fondu

Affinez l'aspect de votre animation en activant les effets zoom et / ou fondu : ils complèteront le style d'animation sans modifier les autres paramètres.

:nuxt-img{.w-full alt="Démonstration de l'effet de zoom et de fondu d'une animation" provider="none" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-effets-zoom-demo.webp"}

### Répéter l'animation

Appliquez un effet de répétition : contrôler le nombre de reprises et la durée entre chaque répétition.

:nuxt-img{alt="Options de répétition d'une animation" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-repetition.webp" width="350"}

### Options spéciales

Certaines options sont spécifiques à une animation. Les paramètres sont alors précisés dans la fenêtre. Modifiez-les selon votre besoin.

:nuxt-img{.w-full.bg-[white] alt="Options spéciales d'animation" src="https://help.touchify.io/2-touchify-studio/4-animations/2-customize/fr-studio-anim-speciales.webp"}

### Initialisation

Par défaut, un élément est invisible avant que son animation d'apparition soit déclenchée.

Pour annuler ce comportement, cliquez sur l'interrupteur de l'option &#x2A;*"Ne pas masquer à l'initialisation"**.


# Les storyboards

## Créer un storyboard

### Méthode 1 : *via le footer*

Cliquez sur le menu déroulant &#x2A;*"Storyboard"** en bas à gauche de l'interface, dans le footer.

Sélectionnez le bouton &#x2A;*"Ajouter un storyboard"*&#x2A; : les paramètres de ce nouveau storyboard s'afficheront, complétez-les puis cliquez sur le bouton &#x2A;*"Retour"** (flèche) pour valider.

:nuxt-img{alt="Ajout d'un storyboard depuis le footer" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-ajout-footer.webp" width="500"}

### Méthode 2 : *via l'élément*

Sélectionnez votre élément et rendez-vous dans le panneau &#x2A;*"Animations"*&#x2A;. Cliquez sur le menu déroulant &#x2A;*"Storyboard"** en haut de la fenêtre.

Sélectionnez le bouton &#x2A;*"Ajouter un storyboard"*&#x2A; : les paramètres de ce nouveau storyboard s'afficheront, complétez-les puis cliquez sur le bouton &#x2A;*"Retour"** (flèche) pour valider.

:nuxt-img{alt="Ajout d'un storyboard depuis un élément" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-ajout-element.webp" width="500"}

## Modifier un storyboard

Sélectionnez le bouton déroulant &#x2A;*"Storyboard"*&#x2A; (dans le footer ou dans le panneau des animations) puis cliquez sur le bouton &#x2A;*"Modifier"** (Pictogramme crayon) du storyboard que vous souhaitez modifier.

:nuxt-img{alt="Modification d'un storyboard" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-modifier.webp" width="500"}

### Exécution

Choisissez de lancer le storyboard à l'affichage ou à la disparition de la page. Cette option est utile dans le cas où vous dédiez votre storyboard aux animations d'entrée ou aux animations de sorties.

### Répéter & alterner

Pour répéter votre storyboard, cliquez sur l'interrupteur de l'option &#x2A;*"Répéter le storyboard"** : choisissez le nombre et la fréquence des répétitions.

Pour alterner votre storyboard, cliquez sur l'interrupteur de l'option &#x2A;*"Alterner le storyboard"** : à la fin de son cycle, le storyboard sera rembobiné puis rejoué à la manière d'un boomerang.

### Éléments entrants

Par défaut, un élément est invisible avant que son animation d'apparition soit déclenchée.
Pour annuler ce comportement, cliquez sur l'interrupteur de l'option &#x2A;*"Ne pas masquer les éléments entrants"**.

## Choisir un storyboard

Chaque animation d'élément est appliquée à un storyboard.

Sélectionnez votre élément puis cliquez sur le bouton &#x2A;*"Animations"*&#x2A; pour vous rendre dans le panneau des animations d'élément.
Sélectionnez le storyboard de votre choix dans le menu déroulant &#x2A;*"Storyboard"*&#x2A; : la prochaine animation que vous ajouterez à votre élément sera affiliée à ce storyboard.
Les animations déjà créées dans ce storyboard seront également visibles dans le panneau &#x2A;*"Animations de l'élément"**.

:nuxt-img{alt="Sélection d'un storyboard" src="https://help.touchify.io/2-touchify-studio/4-animations/3-storyboards/fr-studio-anim-story-selection.webp" width="500"}

::caution
**Attention :**

 une fois l'animation appliquée, vous ne pourrez pas la changer de storyboard. Assurez-vous d'avoir sélectionné le bon storyboard avant d'ajouter une animation.
::


# Introduction

## Créer un projet d'affichage dynamique

::note
Touchify est accessible en ligne, à partir de n'importe quel navigateur. Assurez-vous d'être connecté à internet lorsque vous souhaitez l'utiliser.
::

### Création du projet

Connectez-vous à votre profil Touchify via le lien touchify.app, puis sélectionnez votre compte. Vous arrivez sur la page dédiée à vos projets.
S'il s'agit de votre première connexion, cliquez sur le bouton "Créer mon premier projet".

:nuxt-img{.w-full alt="Bouton Créer mon premier projet" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-creer-premier-projet.webp"}

Si vous avez déjà accès à plusieurs projets, cliquez sur le bouton "Créer un nouveau projet" situé en haut à droite de la section.

:nuxt-img{.w-full alt="Bouton Créer un nouveau projet" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-creer-nouveau-projet.webp"}

### Type de projet

Plusieurs paramètres sont à définir lorsque vous créez un nouveau projet.
Trois types de projet vous sont suggérés : sélectionnez « Affichage dynamique » afin d'optimiser les fonctionnalités de vos futures playlists.

:nuxt-img{.w-full alt="Sélection du type de projet" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-type-de-projet.webp"}

### Résolution

Le format de votre projet est entièrement personnalisable.
Une large liste de dimensions vous sont proposées, classées par résolution ou par type d'appareil ; le cas échéant, entrez les dimensions souhaitées en cliquant sur le bouton de droite "Personnaliser".

:nuxt-img{.w-full alt="Sélection de la résolution du projet" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-resolution-du-projet.webp"}

### Equipe

Vous pouvez classer votre projet dans une équipe.
La fonction "Équipe" gère l'accessibilité au projet : ce dernier ne pourra être vu ou modifié que par les membres de l'équipe sélectionnée.

:nuxt-img{.w-full alt="Sélection de l'équipe du projet" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-equipe-du-projet.webp"}

Une fois ces paramètres définis, cliquez sur le bouton "Créer le projet".

::note
Vos choix ne sont pas irréversibles. Ils peuvent être modifiés dans la page du projet ou dans ses paramètres.
::

**Félicitation, votre projet a été créé !**

Touchify Studio s'est ouvert dans une nouvelle fenêtre. L'interface de création de Playlist vous permettra d'intégrer du contenu et de personnaliser le fonctionnement de votre projet.

## Activer les playlists dans un projet interactif

Si, lors de la création de votre projet, vous avez choisi le type Affichage Interactif, votre présentation s'ouvrira automatiquement sur l'onglet Design. L'onglet Playlist se trouve juste à côté, dans le menu supérieur du Studio.

:nuxt-img{.w-full alt="Onglet Playlist dans le menu supérieur du Studio" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-interactivite-et-inactivite.webp"}

Sélectionnez cet onglet : un panneau d'activation vous sera présenté, afin de régler les paramètres généraux de votre affichage. Choisissez le délai d'inactivité, l'action lancée à la fin de ce dernier ainsi que les options relatives à vos choix précédents, puis cliquez sur le bouton "Valider".

:nuxt-img{.w-full alt="Panneau d'activation et paramètres d'inactivité" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-activer-inactivite.webp"}

Si vous souhaitez changer de type de votre projet pour l'optimiser, cliquez sur l'onglet Paramètres > Projet puis sélectionnez le type de votre choix.

:nuxt-img{.w-full alt="Changer le type de projet dans les paramètres" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-changer-type-de-projet.webp"}

## Créer une playlist

Une playlist vide est créée par défaut. Vous pouvez l'utiliser directement ou en créer une nouvelle.
Pour créer une nouvelle playlist, cliquez sur le bouton "Playlist" en haut du menu latéral gauche. Dans le nouveau panneau Playlist, appuyez sur le bouton "Ajouter une playlist".

:nuxt-img{.w-full alt="Bouton Ajouter une playlist dans le panneau des Playlists" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-creer-une-playlist.webp"}

Une fois votre playlist créée, sélectionnez dans le menu de gauche le type de contenu que vous souhaitez y ajouter : image, vidéo, document, page, météo...
Si vous intégrez une page, vous pouvez la modifier dans l'onglet Design. Un bouton "Ouvrir dans Design" est prévu à cet effet, en bas de la zone de travail.

:nuxt-img{.w-full alt="Bouton Ouvrir dans Design en bas de la zone de travail" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-ouvrir-dans-design.webp"}

### Configuration

Personnalisez les paramètres d'affichage dans le panneau de droite : durée, page de destination en cas d'interaction, transitions...

:nuxt-img{.w-full alt="Panneaux de configuration dans le menu latéral droit" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-panneaux-configuration.webp"}

Le menu latéral de droite permet d'accéder à trois sections différentes :

- La section Options de l'élément, pour modifier l'élément de la playlist sélectionné
- La section Transition de l'élément, pour ajuster les animations de transition
- La section Options de la playlist, permettant de personnaliser les paramètres précédents de manière globale

Par défaut, les pages de votre playlist s'enchainent dans l'ordre de la liste. Changez leur position grâce au glisser-déposer, ou activez le mode aléatoire dans la fenêtre playlist, à droite de l'interface, dans l'onglet « Options de la playlist ».

:nuxt-img{.w-full alt="Options de la playlist avec activation du mode aléatoire" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/1-introduction/fr-playlists-configuration-playlist.webp"}

::note
En lecture aléatoire, les éléments s'affichent une seule fois par cycle. Leur ordre d'apparition change aléatoirement, mais tous les éléments doivent apparaitre une fois avant qu'un nouveau cycle ne se lance.
::

::note
Pour modifier les conditions globales d'inactivité, retournez au niveau du panneau playlists et cliquez sur le bouton "Paramètres d'inactivité".
::


# Fréquence d'affichage des éléments

::note
Prérequis : créer une playlist. Cet article aborde la création de contenu. Pour apprendre à créer la base de votre projet, lisez l'article précédent.
::

## Cycles d'affichage

Un cycle prend fin lorsque tous les éléments de la playlist se sont affichés : les cycles s'enchainent automatiquement, dans l'ordre de la liste (ou aléatoirement si cette option est activée).

La fréquence d'affichage d'un élément permet de choisir s'il apparaîtra à chaque cycle, ou de manière ponctuelle (tous les X cycles, toutes les X minutes…). Pour modifier ce paramètre, sélectionnez un élément puis cliquez dans le champ de l'option « Fréquence », dans la première fenêtre à droite de l'interface. Choisissez la fréquence des cycles ou la durée avant laquelle cet élément s'affichera.

:nuxt-img{.w-full alt="Option de fréquence des cycles" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/fr-playlists-frequence-cycles.webp"}

### Exemple

À l'accueil de mon centre commercial, un écran diffuse une playlist des dernières actualités. Je souhaite ajouter une page publicitaire au sujet de la carte fidélité, mais je veux que son apparition soit ponctuelle pour laisser la priorité aux actualités.

Une fois ma page fidélité insérée dans ma playlist, je modifie sa fréquence d'affichage pour qu'elle apparaisse tous les deux cycles : l'enchainement sera donc actu 1, actu 2, actu 1, actu 2, informations, puis de nouveau actu 1, actu 2…

:nuxt-img{.w-full alt="Exemple de fréquence des cycles" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/fr-playlists-frequence-cycles-exemple.webp"}

## Répétitions

Les éléments connectés à des données externes, comme les actualités ou l'horoscope, peuvent avoir un affichage tournant et changer de contenu à chaque occurrence. L'option de répétition permet d'enchainer plusieurs affichages, consécutifs mais au contenu différent, à partir d'un seul élément.

Pour activer ce paramètre, sélectionnez un élément puis cliquez dans le champ de l'option « Répétition », dans la première fenêtre à droite de l'interface. Choisissez le nombre de répétitions consécutives de cet élément dans un même cycle.

:nuxt-img{.w-full alt="Option de répétition des éléments" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/fr-playlists-repetition.webp"}

### Exemple

Mon écran d'accueil diffuse une playlist des dernières actualités. Je souhaite y ajouter l'horoscope de la semaine, mais je ne veux pas afficher tous les signes sur une même page par souci de lisibilité.

Dans ma playlist, j'ajoute un élément horoscope « Affichage alterné » : je choisis d'afficher six signes à la fois, ce qui signifie que les six premiers signes apparaîtront au premier cycle, puis les six derniers au second cycle. Je n'ai pas envie de couper l'horoscope entre deux cycles, alors j'active la répétition sur cet élément. Ce seul élément apparaitra donc deux fois d'affilée, d'abord avec les six premiers signes, puis avec les derniers, avant que la playlist ne continue son cycle.

:nuxt-img{.w-full alt="Exemple de répétition des éléments" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/2-frequencies/fr-playlists-repetition-exemple.webp"}


# Conditions d'affichage des éléments

Les éléments d'une playlist peuvent être configurés individuellement. Leur affichage peut dépendre de certaines conditions.

Pour ajouter une condition à un élément de votre playlist, sélectionnez-le puis déroulez la fenêtre « Conditions d'affichage » à droite de l'interface.

:nuxt-img{.w-full alt="Fenêtre Conditions d'affichage dans le panneau de droite" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/fr-playlists-conditions.webp"}

Cliquez sur « Ajouter une condition » puis choisissez parmi :

- Les **Dates d'affichage**, pour définir une durée ou une récurrence d'affichage
- Les **Groupes et écrans**, pour choisir quels écrans de votre parc pourront afficher cet élément

## Exemple de diffusion par dates

Je souhaite communiquer sur les soldes d'été. J'aimerais qu'une page promotionnelle s'intègre aux actualités de mon écran d'accueil, du 24 juin au 21 juillet.

Dans ma playlist, j'ajoute cette page promotionnelle puis je lui applique une condition de temps :

:nuxt-img{.w-full alt="Exemple de condition d'affichage par dates" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/fr-playlists-conditions-exemple-temps.webp"}

De cette manière, ma page promotionnelle s'ajoutera automatiquement à mon affichage le 24 juin, puis cessera d'apparaitre le 21 juillet, sans intervention de ma part.

## Exemple de diffusion par écrans

J'ai deux écrans d'affichage dans mon centre commercial, diffusant tous les deux la même playlist d'actualités. Je souhaite ajouter une page donnant la direction des ascenseurs : je ne peux pas diffuser la même sur les deux écrans, puisque leur position par rapport aux ascenseurs est différente.

Dans ma playlist, je crée deux pages directionnelles : l'une pour l'écran A, l'autre pour l'écran B. J'ajoute à la page « Ecran A » une condition pour l'inclure à l'écran A, et à la page « Ecran B » une condition pour l'écran B.

:nuxt-img{.w-full alt="Exemple de condition d'affichage par écrans" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/fr-playlists-conditions-exemple-ecrans.webp"}

De cette manière, chaque écran diffuse la bonne signalétique tout en conservant la même playlist d'actualités.

:nuxt-img{.w-full alt="Illustration des conditions d'affichage par écrans" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/3-conditions/fr-playlists-conditions-exemple-illustration.webp"}


# Playlists imbriquées

## Imbriquer une playlist

Une première playlist peut être intégrée dans une seconde playlist à la manière d'un élément.

Sélectionnez votre playlist, puis cliquez sur le bouton « Apps » du menu d'insertion. Dans la section « Autres applications », cliquez sur le bouton « Playlist », puis choisissez la playlist que vous souhaitez ajouter.

:nuxt-img{.w-full alt="Ajout d'une playlist imbriquée via le menu Apps" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/fr-playlists-imbriquer-des-playlists.webp"}

### Exemple

J'ai deux écrans d'affichage dans mon centre commercial, diffusant chacun une playlist différente. J'aimerais ajouter les mêmes pages publicitaires à ces deux affichages.

J'ai actuellement deux playlists dans mon projet : l'une pour l'écran A, l'autre pour l'écran B. Je crée une playlist C dans laquelle j'ajoute les pages publicitaires de mon choix. Une fois terminé, je sélectionne la playlist A dans laquelle j'insère un élément playlist relié à la playlist C ; même chose pour la playlist B.

:nuxt-img{.w-full alt="Exemple d'imbrication de playlists" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/fr-playlists-imbriquer-des-playlists-exemple.webp"}

Maintenant, l'écran A diffuse la playlist A et la playlist C. De son côté, l'écran B diffuse la playlist B et la playlist C.

:nuxt-img{.w-full alt="Illustration de l'imbrication de playlists" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/fr-playlists-imbriquer-des-playlists-illustration.webp"}

## Fréquence de la playlist imbriquée

En tant qu'élément, une playlist imbriquée peut dépendre d'une fréquence d'affichage.

La fréquence d'affichage d'un élément permet de choisir s'il apparaîtra à chaque cycle, ou de manière ponctuelle (tous les X cycles, toutes les X minutes…). Pour modifier ce paramètre, sélectionnez un élément puis cliquez dans le champ de l'option « Fréquence », dans la première fenêtre à droite de l'interface. Choisissez la fréquence des cycles ou la durée avant laquelle cet élément s'affichera.

:nuxt-img{.w-full alt="Option de fréquence d'une playlist imbriquée" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/fr-playlists-frequence-playlist-imbriquee.webp"}

Vous pouvez choisir si la playlist imbriquée s'affiche entièrement ou partiellement.

Sélectionnez la playlist imbriquée puis cherchez le champ « Afficher » dans la fenêtre « Playlist » à droite de l'interface. Choisissez le nombre d'éléments issus de la playlist imbriquée que vous souhaitez afficher à chaque cycle.

:nuxt-img{.w-full alt="Choix du nombre d'éléments affichés de la playlist imbriquée" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/fr-playlists-nombre-d-elements-playlist-imbriquee.webp"}

::note
Si vous activez l'option « Affichage aléatoire » dans une playlist, son affichage sera toujours aléatoire une fois imbriquée.
::

### Exemple

Je souhaite afficher les photos des précédents événements sur ma borne d'accueil, en plus de la playlist active. J'ai beaucoup trop de photos pour les afficher successivement, mais j'aimerais pouvoir toutes les diffuser.

En plus de ma playlist active A, je crée une seconde playlist B dans laquelle j'insère les 35 photos que je veux afficher. Je retourne ensuite dans ma playlist A pour y imbriquer la playlist B : je la sélectionne puis, dans le champ « Afficher » de la fenêtre « Playlist », je choisis de n'afficher que 5 éléments à la fois. Ainsi, à chaque cycle, les photos de ma playlist B s'afficheront 5 par 5 à la suite de la playlist A.

:nuxt-img{.w-full alt="Illustration du nombre d'éléments affichés d'une playlist imbriquée" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/4-nested/fr-playlists-illustration-playlists-imbriquees.webp"}

::note
Je peux activer l'option « Affichage aléatoire » dans la playlist B afin que les photos, toujours affichées 5 par 5, soient choisies aléatoirement.
::


# Programmation des playlists

## Diffusion

Pour programmer votre playlist, créez d'abord une nouvelle diffusion.

En haut à gauche de l'interface, à côté de l'onglet « Playlist » dans lequel vous venez de construire votre projet, cliquez sur l'onglet « Diffuser ». Cliquez sur le bouton « Nouvelle diffusion » pour commencer.

:nuxt-img{.w-full alt="Bouton Nouvelle diffusion dans l'onglet Diffuser" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/fr-playlists-programmation-diffuser.webp"}

**Étape 1 :** choisissez la playlist concernée par la diffusion. La playlist par défaut est automatiquement sélectionnée, mais vous pouvez choisir parmi toutes les playlists de votre projet.

:nuxt-img{.w-full alt="Étape 1 : sélection de la playlist" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/fr-playlists-programmation-1-playlist.webp"}

**Étape 2 :** sélectionnez le groupe ou l'écran sur lequel vous souhaitez diffuser votre playlist.

:nuxt-img{.w-full alt="Étape 2 : sélection du groupe ou de l'écran" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/fr-playlists-programmation-2-groupe-ou-ecran.webp"}

::note
Un groupe de diffusion permet de relier un ou plusieurs projets à un ou plusieurs écrans dans un seul espace. Cela simplifie la gestion de votre projet vis-à-vis de votre parc d'écrans.
::

**Étape 3 :** l'étape de programmation est facultative. Si votre projet ne doit suivre aucune condition de date ou de durée, appliquez la diffusion. Dans le cas contraire, cliquez sur le bouton « Planifier la diffusion ».

:nuxt-img{.w-full alt="Étape 3 : choix de planification ou diffusion immédiate" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/fr-playlists-programmation-3-quand.webp"}

## Planification

Comme pour ses éléments, la playlist complète peut dépendre de certaines conditions : durée, récurrence, horaires spécifiques…

Commencez par lancer une nouvelle diffusion dans l'onglet « Diffusion », en haut à gauche de l'interface. Complétez les étapes de Configuration et de Diffusion à votre convenance puis cliquez sur le bouton « Planifier la diffusion » lors de l'étape de Programmation.

:nuxt-img{.w-full alt="Bouton Planifier la diffusion" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/fr-playlists-programmation-3-planifier.webp"}

Deux types d'affichages vous sont proposés :

- L'**Affichage simple**, afin de définir une date de début et/ou de fin de diffusion, ou bien une durée.
- L'**Affichage récurrent**, pour programmer un affichage ponctuel mais régulier, ainsi qu'un nombre de répétitions si nécessaire.

:nuxt-img{.w-full alt="Options de planification : affichage simple ou récurrent" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/fr-playlists-programmation-3-planifier-dates.webp"}

Une fois vos conditions définies, cliquez sur le bouton « Valider ». Vous pouvez consulter un résumé de votre publication avant de diffuser (ou de simplement enregistrer) votre projet.

- **Publiez et diffusez** afin d'immédiatement appliquer cette programmation aux groupes ou aux écrans concernés.
- **Appliquez sans publier** pour enregistrer votre programmation et l'activer plus tard, lors de la prochaine publication de votre projet.

:nuxt-img{.w-full alt="Résumé et validation de la diffusion" provider="none" src="https://help.touchify.io/2-touchify-studio/5-playlists/5-schedule/fr-playlists-programmation-4-valider.webp"}

Revenez à tout moment dans l'onglet « Diffuser » pour modifier votre diffusion ou en créer une nouvelle.


# Introduction

## Introduction

Touchify Publisher permet de diffuser vos contenus de manière centralisée, de configurer vos écrans à distance et de surveiller la connectivité de votre parc digital.

## Premiers pas

Publisher est accessible depuis le menu principal.

## Créer mon premier groupe de diffusion

::tip
Les groupes de diffusion permettent de contrôler des groupes d'écrans de manière centralisée.
::

Pour créer un groupe de diffusion, cliquez sur le bouton &#x2A;*"Créer un groupe de diffusion"**.

![Créer un groupe de diffusion](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-creer-groupe.webp)

Un formulaire apparaît pour configurer le groupe. Définissez un nom et cliquez sur le bouton &#x2A;*"Créer le groupe"**.

![Formulaire de création d'un groupe de diffusion](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-creer-groupe-formulaire.webp)

## Configurer le contenu diffusé sur les écrans

Désormais, votre groupe de diffusion est disponible. Il est nécessaire de définir le contenu qui devra être affiché sur les écrans qui seront associés à ce groupe.

Sur la page du groupe, dans l'onglet &#x2A;*"Projets"*&#x2A;, cliquez sur le bouton &#x2A;*"+"** pour ajouter des projets dans le groupe.

![Ajouter un projet à un groupe de diffusion](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-groupe-ajout-projet.webp)

Une fenêtre apparaît, sélectionnez un projet dans la liste puis cliquez sur le bouton &#x2A;*"Sauvegarder"** pour valider la configuration.

## Connecter des écrans à mon groupe

Votre groupe de diffusion est désormais prêt. Vous pouvez connecter des écrans et les associer à ce groupe en cliquant sur le bouton &#x2A;*"Connecter des écrans"**.

![Connectez des écrans à un groupe de diffusion](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-groupe-connecter.webp)

Une fenêtre apparaît et affiche une clé de déploiement. Cette clé permet d'associer un écran avec le groupe de diffusion. Copiez cette clé, vous en aurez besoin lors de l'installation de l'application Touchify.

![Fenêtre de connexion à un groupe de diffusion](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-groupe-connecter-cle.webp)

## Associer votre écran

Pour commencer, installez l'application Touchify sur votre écran en suivant les instructions disponibles dans l'article suivant : Comment installer l'application Touchify ?

Lors du premier démarrage, cliquez sur &#x2A;*"Associer mon appareil"*&#x2A; puis entrez la clé de déploiement obtenue plus tôt. Enfin, cliquez sur &#x2A;*"Confirmer"**.

![Association d'un écran à un groupe](https://help.touchify.io/3-touchify-publisher/1-introduction/fr-publisher-player-associer.webp)

Félicitations, vous avez désormais connecter votre premier écran à Touchify. Vous pouvez désormais contrôler cet écran à distance en configurant le groupe de diffusion sur lequel l'écran est associé.


# Introduction

## Premiers pas

::card-group
  :::card
  ---
  icon: i-lucide-app-window-mac
  title: L'application Touchify Player
  to: https://help.touchify.io/fr/touchify-player/getting-started/application
  ---
  Article d'introduction à l'application Touchify Player.
  :::

  :::card
  ---
  icon: i-lucide-key-round
  title: Se connecter
  to: https://help.touchify.io/fr/touchify-player/getting-started/connection
  ---
  Découvrez les deux modes d'authentification de l'application Touchify Player selon votre cas d'utilisation.
  :::

  :::card
  ---
  icon: i-lucide-grid-2x2
  title: Ecran d'accueil
  to: https://help.touchify.io/fr/touchify-player/getting-started/home-screen
  ---
  Découvrez les fonctionnalités de l'écran d'accueil de l'application Touchify Player.
  :::

  :::card
  ---
  icon: i-lucide-settings
  title: Options du lecteur
  to: https://help.touchify.io/fr/touchify-player/getting-started/settings
  ---
  Découvrez les options du lecteur Touchify.
  :::
::

## Guides d'installation

::card-group
  :::card
  ---
  icon: i-cib-windows
  title: Windows
  to: https://help.touchify.io/fr/touchify-player/installation/windows
  ---
  Installer Touchify sur des players Windows.
  :::

  :::card
  ---
  icon: i-cib-android
  title: Android
  to: https://help.touchify.io/fr/touchify-player/installation/android
  ---
  Installer Touchify sur des players Android.
  :::

  :::card
  ---
  icon: i-cib-google-chrome
  title: ChromeOS
  to: https://help.touchify.io/fr/touchify-player/installation/chromeos
  ---
  Installer Touchify sur des players ChromeOS.
  :::

  :::card
  ---
  icon: i-cib-samsung
  title: Tizen
  to: https://help.touchify.io/fr/touchify-player/installation/tizen
  ---
  Installer Touchify sur des players Tizen.
  :::

  :::card
  ---
  icon: i-lucide-cpu
  title: BrightSign
  to: https://help.touchify.io/fr/touchify-player/installation/brightsign
  ---
  Installer Touchify sur des players BrightSign.
  :::

  :::card
  ---
  icon: i-cib-linux
  title: Linux & Raspberry Pi
  to: https://help.touchify.io/fr/touchify-player/installation/linux
  ---
  Installer Touchify sur des players Linux et Raspberry Pi.
  :::

  :::card
  ---
  icon: i-cib-apple
  title: macOS
  to: https://help.touchify.io/fr/touchify-player/installation/macos
  ---
  Installer Touchify sur des players macOS.
  :::

  :::card
  ---
  icon: i-cib-app-store-ios
  title: iOS et iPadOS
  to: https://help.touchify.io/fr/touchify-player/installation/ios
  ---
  Installer Touchify sur des players iOS et iPadOS.
  :::

  :::card
  ---
  icon: i-lucide-tv
  title: Android TV
  to: https://help.touchify.io/fr/touchify-player/installation/android-tv
  ---
  Installer Touchify sur des players Android TV.
  :::

  :::card
  ---
  icon: i-cbi-lg
  title: LG webOS
  to: https://help.touchify.io/fr/touchify-player/installation/webos
  ---
  Installer Touchify sur des players webOS.
  :::
::

## Résolution des problèmes

::card-group
  :::card
  ---
  icon: i-lucide-bug
  title: Dépannage du mode Kiosque
  to: https://help.touchify.io/fr/touchify-player/troubleshooting/kiosk
  ---
  Découvrez comment dépanner le mode Kiosque de l'application Touchify Player dans les cas critiques où l'appareil semble bloqué.
  :::
::


# L'Application Touchify Player

## Introduction

L'application Touchify Player permet d'afficher les contenus créés dans Touchify Studio sur vos appareils : tablettes, écrans, bornes tactiles ou tous types de dispositifs digitaux interactifs ou non (mur d'écrans, vitrines projetés...).

Touchify permet de créer tout type de contenu de communication que l'on peut séparer en deux grandes catégories :

- Présentation : présentation d'entreprise, supports commerciaux, supports de formation...
- Communication : affichage dynamique ou interactif dans une entreprise ou l'espace public

## Profil d'utilisateur

### Créateur de contenu

Vous utilisez Touchify Studio pour créer vos propres présentations ou pour administrer les contenus de votre organisation diffusés sur votre parc digital.
Auquel cas, vous pouvez vous connecter à l'application avec votre compte utilisateur.

### Lecteur uniquement

Votre ordinateur est connecté ou a été connecté par votre administrateur informatique à partir d'une clé de déploiement.
Vos contenus sont gérés par votre organisation et automatiquement synchronisés par l'application.

## Installer l'application

L'application Touchify Player est compatible Windows, Linux, macOS, iOS, Android, Tizen et BrightSign.

Retrouvez toutes les versions sur la page [Téléchargements](https://get.touchify.io){rel="nofollow"}.

Retrouvez tous les guides d'installation dans le [Centre d'aide](https://help.touchify.io/../introduction).

## Fonctionnalités principales

### Affichage des contenus

Selon la configuration, l'application démarre sur l'écran d'accueil ou sur un contenu prédéfini. Pour plus de détails, veuillez consulter les articles correspondants.

- [Fonctionnalités de l'écran d'accueil](https://help.touchify.io/home-screen)
- [Fonctionnalités du lecteur](https://help.touchify.io/player)

### Synchronisation et mode hors ligne

Les contenus et les configurations du Publisher sont synchronisées automatiquement. Une fois synchronisée l'application fonctionne hors ligne, en cas de coupure réseau ou en déplacement.

Toutes les fonctionnalités natives de Touchify sont compatibles avec le mode hors ligne.

En revanche les ressources web ne sont pas disponibles hors connexion. Cela concerne notamment les intégrations web et les vidéos non hébergées sur la plateforme (Youtube, Dailymotion...)

### Mise à jour automatique

Toutes les versions de l'application Touchify Player supportent la mise à jour automatique. Une application à jour c'est la garantie d'une sécurité optimale, de meilleures performances, des corrections d'anomalies dans les meilleurs délais et de nouvelles fonctionnalités.

### Sécurisation de l'application

Pour le déploiement d'écrans interactifs dans une entreprise ou dans l'espace public, il est nécessaire de sécuriser l'ordinateur et de restreindre complètement l'accès au système d'exploitation.

Touchify met à disposition un certain nombre de fonctionnalités pour garantir la sécurité de vos écrans sans aucune compétence technique : mode kiosque activable en un clic, clavier virtuel restreint aux fonctionnalités de saisie, navigateur sécurisé...


# Se connecter

## Profil d'utilisateur

**Créateur de contenu :** Vous utilisez Touchify Studio pour créer vos propres présentations ou pour administrer les contenus de votre organisation diffusés sur votre parc digital. Auquel cas, vous pouvez vous connecter à l'application avec votre compte utilisateur.

### Lecteur uniquement

Vous souhaitez connecter un ordinateur et l'administrer avec Touchify Publisher. Dans ce cas, vous pouvez créer des groupes de diffusion pour associer vos écrans à partir d'une clé de déploiement.

## Se connecter avec un compte utilisateur

Utilisez vos identifiants pour vous connecter à votre compte utilisateur et accéder à vos projets publiés.

![Connexion utilisateur sur Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/2-connection/fr-player-connexion-utilisateur.webp)

## Associer un écran à un groupe de diffusion

Utilisez la clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/2-connection/fr-player-connexion-associer.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).

## Cas d'erreur courants

Appareil non connecté à Internet
L'appareil doit être connecté à Internet pour s'authentifier. Les URLs d'accès à la plateforme Touchify doivent être accessibles. Le cas échéant le proxy ou le pare-feu de l'entreprise doit autoriser explicitement les domaines suivants : \*.touchify.app, \*.touchify.io et \*.blob.core.windows.net

L'application Touchify Player supporte les Configurations Automatiques de Proxy (fichier PAC).

::u-button
---
icon: i-lucide-mail
target: _blank
to: https://touchify.io/contact
variant: primary
---
Nous contacter
::

- **Clé inconnue :** Il s'agit généralement d'un groupe supprimé ou d'une erreur de saisie.
- **Clé expirée :** La clé de déploiement a été créé pour un déploiement personnalisé et limité dans le temps. La clé est expiré mais elle peut être renouvelée si le déploiement est toujours valide.
- **Déploiement complet :** Le nombre maximal d'appareils a été atteint pour cette clé de déploiement. Vous pouvez augmenter le nombre d'écrans autorisés, supprimer des écrans non utilisés ou acquérir de nouvelles licences.
- **Appareil déjà associé :** L'appareil est déjà associé à votre organisation mais a pu être déconnecté pour des raisons diverses. Veuillez supprimer l'écran du Publisher et renouveler l'opération.


# Ecran d'accueil

## Aperçu

L'écran d'accueil affiche la liste des projets publiés et autorisés selon la configuration du compte ou du groupe de diffusion.

Si vous êtes connectés en tant qu'utilisateur, vous retrouvez également l'organisation des dossiers telle que définie dans votre espace ainsi que les équipes de l'utilisateur.

![Liste des projets dans l'application Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-apps.webp)

### Équipes

Cliquez sur une équipe pour filtrer la liste des projets.

### Rechercher

Le bouton *Rechercher* lance une recherche dans le titre et la description des projets.

### Synchroniser

Le bouton *Synchroniser* permet de forcer la synchronisation des contenus.

## Ouvrir un projet

Cliquez sur la tuile d'un projet pour démarrer la lecture. Le lecteur s'affiche dans une nouvelle fenêtre en plein écran. Un clic prolongé sur l'écran permet d'afficher les outils et de fermer la fenêtre du projet.

Pour en savoir plus, veuillez consulter l'article [Options du Lecteur](https://help.touchify.io/settings).

![Barre d'outils de Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-toolbar.webp)

## Détails du projet

Sur la tuile d'un projet, cliquez sur le bouton *Détails* en bas à droite pour afficher les détails. Vous pouvez ainsi accéder aux outils et aux paramètres spécifiques du projet.

Les outils et paramètres de projet sont détaillés dans la section Fonctionnalités Avancées.

![Détails d'un projet dans Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-details.webp)

## Menu de l'application

Le menu de l'application est accessible à partir du bouton *Menu* en haut à gauche de l'écran. Il permet notamment d'accéder aux paramètres et de déconnecter l'application.

Les paramètres sont détaillés dans l'article Paramètres de l'application.

![Menu de l'application Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/3-home-screen/fr-player-home-options.webp)


# Options du lecteur

## Afficher les outils

Un clic droit ou un clic prolongé permet d'afficher les outils du lecteur. Les boutons affichés dépendent du niveau de compte, du projet et de la configuration du groupe de diffusion.

![Barre d'outils de Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/4-settings/fr-player-options-outils.webp)

## Mode Administrateur

Selon la configuration du groupe de diffusion, les outils peuvent être complètement désactivés. Le mode Administrateur permet d'accéder aux outils en cliquant successivement sur les 4 coins de l'écran, à partir du coin en haut à gauche, dans le sens des aiguilles d'une montre.

![Accès restreint à la configuration de Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/4-settings/fr-player-options-restreint.webp)

::caution
**Recommandation**

:br


Il est fortement conseillé de protéger le mode Administrateur par mot de passe dans la configuration du groupe de diffusion.
::

::note
**Cas particulier**

:br


Le mode Administrateur est désactivé si le mot de passe n'est pas défini et que l'option Masquer tous les boutons est activée.
::

## Boutons principaux

### Fermer le lecteur

Le bouton Fermer, en haut à droite de l'écran, permet de retourner à l'écran d'accueil.

### Plein écran

Le bouton Plein écran, en bas à droite, permet d'activer ou de désactiver le plein écran.

### Paramètres

Le bouton Menu, en haut à gauche, permet d'accéder aux paramètres, de déconnecter ou de fermer l'application selon la configuration de l'appareil.

### Navigation

Les boutons de navigation, en bas au centre, permettent de retourner à l'écran d'accueil, de naviguer vers la page précédente ou la page suivante.

### Activer le son

Selon les appareils, le son des vidéos jouées automatiquement doit être désactivé par défaut. Auquel cas le bouton Activer le son apparaît à l'écran ainsi que dans les outils.

## Outils et paramètres du projet

Les outils sont affichés à gauche de la barre d'outils en bas de l'écran. Les paramètres du projet sont positionnés à gauche. Ils ne sont visibles que si les fonctionnalités concernées sont activées.

![Barre d'outils de Touchify Player](https://help.touchify.io/4-touchify-player/2-getting-started/4-settings/fr-player-options-outils.webp)

Les fonctionnalités de la barre d'outils sont détaillées dans la section Fonctionnalités avancées.


# Guides d'installation

## Sélectionnez votre plateforme

L'installation de Touchify Player dépend du système d'exploitation de votre écran ou de votre player.
Vous trouverez ci-dessous les différents guides en fonction de votre plateforme.

::card-group
  :::card
  ---
  icon: i-cib-windows
  title: Windows
  to: https://help.touchify.io/fr/touchify-player/installation/windows
  ---
  Installer Touchify sur des players Windows.
  :::

  :::card
  ---
  icon: i-cib-android
  title: Android
  to: https://help.touchify.io/fr/touchify-player/installation/android
  ---
  Installer Touchify sur des players Android.
  :::

  :::card
  ---
  icon: i-cib-google-chrome
  title: ChromeOS
  to: https://help.touchify.io/fr/touchify-player/installation/chromeos
  ---
  Installer Touchify sur des players ChromeOS.
  :::

  :::card
  ---
  icon: i-cib-samsung
  title: Samsung Tizen
  to: https://help.touchify.io/fr/touchify-player/installation/tizen
  ---
  Installer Touchify sur des players Tizen.
  :::

  :::card
  ---
  icon: i-lucide-cpu
  title: BrightSign
  to: https://help.touchify.io/fr/touchify-player/installation/brightsign
  ---
  Installer Touchify sur des players BrightSign.
  :::

  :::card
  ---
  icon: i-cib-linux
  title: Linux & Raspberry Pi
  to: https://help.touchify.io/fr/touchify-player/installation/linux
  ---
  Installer Touchify sur des players Linux et Raspberry Pi.
  :::

  :::card
  ---
  icon: i-cib-apple
  title: macOS
  to: https://help.touchify.io/fr/touchify-player/installation/macos
  ---
  Installer Touchify sur des players macOS.
  :::

  :::card
  ---
  icon: i-cib-app-store-ios
  title: iOS et iPadOS
  to: https://help.touchify.io/fr/touchify-player/installation/ios
  ---
  Installer Touchify sur des players iOS et iPadOS.
  :::

  :::card
  ---
  icon: i-lucide-tv
  title: Android TV
  to: https://help.touchify.io/fr/touchify-player/installation/android-tv
  ---
  Installer Touchify sur des players Android TV.
  :::

  :::card
  ---
  icon: i-cbi-lg
  title: LG webOS
  to: https://help.touchify.io/fr/touchify-player/installation/webos
  ---
  Installer Touchify sur des players webOS.
  :::
::


# Guide d'installation Windows

::caution
Attention, le navigateur ou le système d'exploitation peut afficher une notification indiquant un logiciel possiblement malveillant. En effet, il faut un certain temps pour qu'une nouvelle version de l'application soit validée par les différents systèmes de sécurité.


:br

:br


Auquel cas, cliquer sur 

**Conserver**

 ou 

**Exécuter**

.
::

## Télécharger l'application

Accédez à la page de téléchargement de l'application Touchify Player et téléchargez la version correspondant à votre système d'exploitation.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Télécharger Touchify Player
::

## Installer l'application

Exécuter le fichier téléchargé pour démarrer l'installation. Le programme extrait les fichiers puis exécute l'application. Par défaut, les mises à jours sont téléchargées automatiquement et installées à la fermeture de l'application.

:nuxt-img{.mx-auto alt="Installateur Windows de Toucihfy Player" src="https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-install.webp" width="400"}

## Se connecter

L'application Touchify Player propose 2 modes d'authentification.

### Se connecter avec un compte utilisateur

Utilisez vos identifiants pour vous connecter à votre compte utilisateur et accéder à vos projets publiés.

![Connexion utilisateur sur Windows](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-connexion.webp)

### Associer un écran à un groupe de diffusion

Utilisez une clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur Windows](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).

## Configurer un mode kiosque sécurisé

Le mode kiosque permet de sécuriser le système et d'exécuter automatiquement l'application au démarrage de l'ordinateur.

::caution
Cette fonctionnalité s'applique aux ordinateurs connectés avec Touchify Publisher.
::

### Pré-requis

L'ordinateur est connecté à un groupe de diffusion sur lequel le mode kiosque est activé.

::tip
Il est conseillé de définir un mot de passe pour restreindre l'accès aux paramètres.
::

### Activer le mode kiosque

Au premier démarrage de l'application, après avoir connecté l'ordinateur, un message vous demandera si vous souhaitez activer le mode kiosque. Cliquer sur Confirmer pour appliquer la configuration.

![Popup d'activation du mode kiosque](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-kiosque-popup.webp)

Vous pouvez activer ou désactiver le mode kiosque à tout moment à partir des paramètres de l'application. Si vous désactiver le mode kiosque, l'application vous proposera de le réactiver au prochain démarrage.

![Popup d'activation du mode kiosque](https://help.touchify.io/4-touchify-player/3-installation/2-windows/fr-player-windows-kiosque-parametre.webp)

::tip
Pour accéder aux paramètres ou fermer l'application en mode kiosque sécurisé, touchez successivement les 4 coins de l'écran en partant du coin en haut à gauche, dans le sens des aiguilles d'une montre.


:br

:br

*Cas particulier : cette fonctionnalité est désactivée si le mot de passe n'est pas défini et que l'option "Masquer tous les boutons" est activée.*
::


# Guide d'installation Android

## Installer l'application

Deux options d'installation sont disponibles pour Android :

- **Application web :** simple, aucune permission requise, pas de fonctionnalités système
- **Application native :** installation à partir du package de l'application

::caution
Seule l'application native permet de configurer un mode kiosque sécurisé.
Nous recommandons d'utiliser l'application web uniquement s'il est impossible d'installer l'application native ou dans des scénarios de connexion utilisateur.
::

### Option 1 : application web

Utilisez Google Chrome sur votre appareil Android pour accéder à l'URL : <https://player.touchify.io>{rel="nofollow"}.

Ouvrir les paramètres du navigateur et sélectionner Ajouter à l'écran d'accueil.

::div{.my-4.grid.sm:grid-cols-3.gap-4.max-w-full}
![Ecran d'installation de l'application Touchify Player sur Android en mode Web](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-web-splash.webp)
![Menu de Chrome sur Android pour l'installation de l'application Touchify Player sur Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-web-menu.webp)
![Confirmation de l'installation de l'application Touchify Player sur Android en mode Web](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-web-confirm.webp)
::

C'est terminé, l'application Touchify Player est installée sur votre appareil et accessible à partir de l'écran d'accueil.

### Option 2 : application native

Télécharger l'application Touchify Player pour Android sur votre appareil : [Touchify APK](https://get.touchify.io/android){rel="nofollow"}.

Ouvrir le fichier `touchify.apk` pour installer l'application.

::caution
**Autorisation spécifique**

:br


Dans certains cas, le système demandera d'autoriser l'installation d'applications inconnues pour installer le package.
::

::note
**Fonctionnalités supplémentaries**

:br


L'application native intègre un mécanisme de mise à jour automatique. Elle offre également des fonctionnalités spécifiques : configurer un mode kiosque sécurisé, définir un projet comme lanceur d'applications personnalisé, utiliser Touchify comme écran de veille...
::

## Se connecter

L'application Touchify Player propose 2 modes d'authentification.

### Se connecter avec un compte utilisateur

Utilisez vos identifiants pour vous connecter à votre compte utilisateur et accéder à vos projets publiés.

![Connexion utilisateur sur Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-connexion.webp)

Associer un écran à un groupe de diffusion
Utilisez une clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).

## Configurer un mode kiosque

### Pré-requis

L'application native est installée et l'appareil est connecté à un groupe de diffusion.

::note
**Recommandation**

:br


Il est conseillé d'activer le mode kiosque dans la configuration du groupe de diffusion et de définir un mot de passe pour restreindre l'accès aux paramètres de l'application.
::

::tip
**Bon à savoir**

:br


Pour accéder aux paramètres ou fermer l'application en mode kiosque sécurisé, touchez successivement les 4 coins de l'écran en partant du coin en haut à gauche, dans le sens des aiguilles d'une montre.


:br

*Cas particulier : cette fonctionnalité est désactivée si le mot de passe n'est pas défini et que l'option "Masquer tous les boutons" est activée.*
::

### Option 1 : kiosque simple

Cette méthode permet de sécuriser un appareil Android simplement mais avec certaines limitations. En particulier, des éléments du système peuvent apparaître en glissant depuis le haut ou le bas de l'écran bien qu'ils soient inactifs. Cela n'impacte la sécurisation de l'appareil.

::caution
De nouvelles limitations rendent cette méthode non optimale sur Android 12+.
::

Pour activer le mode kiosque, accédez aux paramètres système de l'application.

![Activation du mode kiosque sur Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-kiosque-parametres.webp)

Confirmer l'activation du mode kiosque, puis définir Touchify Player comme application d'accueil ou Home App. Cet écran peut changer selon les versions d'Android.

![Confirmation de l'activation du mode kiosque sur Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-kiosque-confirm.webp)

L'application Touchify Player redémarre alors en mode kiosque. Il est possible de désactiver ou de suspendre temporairement le mode kiosque à partir des paramètres système de l'application.

![Désactivation du mode kiosque sur Android](https://help.touchify.io/4-touchify-player/3-installation/3-android/fr-player-android-kiosque-desactiver.webp)

### Option 2 : kiosque avancé

Cette méthode permet de mettre en place un mode kiosque entièrement sécurisé en configurant l'application Touchify Player comme Device Owner à l'aide d'Android Device Bridge (ADB).

1. Connecter l'appareil à un ordinateur à l'aide d'un cable USB ;
2. Autoriser le débogage USB ;
3. Exécuter les commandes suivantes avec ADB :

```bash
## check if your device is available and authorized
adb devices

## install the touchify package
adb install -r "PATH\TO\touchify.apk"

## set device owner
adb shell dpm set-device-owner co.touchify.player/co.touchify.cordova.plugin.kiosk.KioskDeviceAdminReceiver 
```

C'est terminé, l'application démarrera automatiquement en mode sécurisé. Vous pouvez suspendre temporairement le mode kiosque à partir des paramètres système de l'application.

::tip
**Où trouver ADB ?**

:br

:br


Si les outils de développement Android sont installés sur votre ordinateur, ADB se trouve dans le dossier 

*platform-tools du SDK*

, par exemple 

*AppData/Local/Android/Sdk/platform-tools*

.


:br

:br


Vous pouvez également télécharger ADB sur 

[Google Android Developpers](https://developer.android.com/studio/releases/platform-tools){rel="nofollow"}

.
::


# Guide d'installation ChromeOS

## Introduction

Trois options d'installation sont disponibles pour ChromeOS :

- [Application simple :](https://help.touchify.io/#option-1-installation-manuelle) installation manuelle simple pour une utilisation sans mode kiosque
- [Application managée :](https://help.touchify.io/#option-2-installation-manag%C3%A9e) installation et configuration à distance via la Console d'administration Google.
- [Application kiosque :](https://help.touchify.io/#option-3-installation-kiosque) installation et configuration à distance via la Console d'administration Google.

## Installation

### Option 1 : Installation manuelle

Utilisez le navigateur Google Chrome sur votre appareil ChromeOS pour accéder à l'URL : <https://player.touchify.app>{rel="nofollow"}.

![Interstitiel d'installation de Touchify Player sur ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-interstitiel.webp)

Cliquez sur l'icone Installer ou ouvrez le menu du navigateur puis sélectionner Installer cette application.

![Menu de Chrome sur ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-menu.webp)

Confirmez l'installation en cliquant sur le bouton Installer dans la fenêtre de confirmation.

![Confirmation d'installation de Touchify Player sur ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-confirm.webp)

C'est terminé, l'application Touchify Player est installée sur votre appareil et accessible à partir du menu d'applications.

*Si lors de la première ouverture, l'application affiche toujours l'installateur, appuyez sur le bouton **recharger** de votre clavier.*

### Option 2 : Installation managée

::caution
Cette section nécessite que l'appareil soit enregistré sur la Console d'administration Google au préalable.


[Cliquez ici pour accéder à la documentation de Google sur le sujet.](https://support.google.com/chrome/a/answer/1360534?sjid=16269526045111143596-EU){rel="nofollow"}
::

Pour installer l'application Touchify Player de façon centralisée, utilisez la Console d'administration Google : <https://admin.google.com>{rel="nofollow"}.

Dans le menu de la Console d'administration Google, naviguez dans **Appareils → Chrome → Applications et extensions → Utilisateurs et navigateurs**.

![Menu applications dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps.webp)

Sélectionnez l'**Unité Organisationnelle** dans laquelle vous souhaitez déployer l'application Touchify Player.
Pour en savoir plus sur les Unités Organisationnelles, [cliquez ici](https://help.touchify.io/#cr%C3%A9ation-dune-unit%C3%A9-organisationnelle).

![Sélection d'unité organisationnelle dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps-uo.webp)

Cliquez sur le bouton &#x2A;*+** en bas à droite de l'écran puis sélectionnez le bouton **Ajouter par URL*&#x2A; &#x2A;(indiqué ci-dessous)*.

![Ajout d'une application dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps-ajout.webp)

Dans la fenêtre de configuration, entrez les paramètres suivants :

- URL : &#x2A;*<https://player.touchify.app>{rel="nofollow"}**
- Ouvrir le site web dans : **Fenêtre distincte**

![Formulaire d'ajout d'une application dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-apps-formulaire.webp)

C'est terminée, l'application Touchify Player va automatiquement s'installer pour tous les utilisateurs et les périphériques présent dans l'**Unité Organisationnelle** sélectionnée.
Vous pouvez également authentifier votre périphérique via la Console d'administration. [Cliquez ici pour en savoir plus](https://help.touchify.io/#associer-lappareil-%C3%A0-touchify-depuis-la-console-dadministration-google).

### Option 3 : Installation kiosque

::caution
Cette section nécessite que l'appareil soit enregistré sur la Console d'administration Google au préalable.


[Cliquez ici pour accéder à la documentation de Google sur le sujet.](https://support.google.com/chrome/a/answer/1360534?sjid=16269526045111143596-EU){rel="nofollow"}
::

Pour installer l'application Touchify Player de façon centralisée, utilisez la Console d'administration Google : <https://admin.google.com>{rel="nofollow"}.

Dans le menu de la Console d'administration Google, naviguez dans **Appareils → Chrome → Applications et extensions → Kiosques**.

![Menu kiosques dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps.webp)

Sélectionnez l'**Unité Organisationnelle** dans laquelle vous souhaitez déployer l'application Touchify Player.
Pour en savoir plus sur les Unités Organisationnelles, [cliquez ici](https://help.touchify.io/#cr%C3%A9ation-dune-unit%C3%A9-organisationnelle).

![Sélection d'une unité organisationnelle dans le menu kiosques dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-uo.webp)

Cliquer sur le bouton &#x2A;*+** en bas à droite de l'écran puis sélectionner le bouton **Ajouter par URL*&#x2A; &#x2A;(indiqué ci-dessous)*.

![Ajout d'une application kiosque dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-ajout.webp)

Dans le fenêtre de configuration, entrer l'URL suivante : <https://player.touchify.app>{rel="nofollow"} puis cliquer sur **Enregistrer**. Une fenêtre de confirmation apparaît, cliquer sur **Accepter**.

![Formulaire d'ajout d'une application kiosque dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-formulaire.webp)

Une fois l'application ajoutée, il est nécessaire de la configurer en tant qu'application par défaut.
Pour cela, cliquez sur le sélecteur **Lancer automatiquement l'application** et sélectionnez **Touchify Player**.

![Lancement automatique d'une application kiosque dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-apps-boot.webp)

C'est terminée, l'application Touchify Player va automatiquement s'installer et se configurer en mode kiosque sur tous les périphériques présent dans l'**Unité Organisationnelle** sélectionnée.
Vous pouvez également authentifier votre périphérique via la Console d'administration. [Cliquez ici pour en savoir plus](https://help.touchify.io/#associer-lappareil-%C3%A0-touchify-depuis-la-console-dadministration-google).

## Se connecter

L'application Touchify Player propose 2 modes d'authentification.

### Se connecter avec un compte utilisateur

Utilisez vos identifiants pour vous connecter à votre compte utilisateur et accéder à vos projets publiés.

![Connexion utilisateur sur ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-connexion.webp)

### Associer un écran à un groupe de diffusion

Utilisez une clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur ChromeOS](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).

Il également possible d'associer l'appareil depuis la Console d'administration de Google.
[Pour en savoir plus, cliquer ici](https://help.touchify.io/#associer-lappareil-%C3%A0-touchify-depuis-la-console-dadministration-google).

## Configurer le mode Kiosque

::caution
Cette section ne concerne que les entreprises ayant souscrit à des licences 

**ChromeOS Kiosk & Signage**

 ou 

**Chrome Enterprise Upgrade**

.
::

Le mode Kiosque de ChromeOS se configure depuis la Console d'administration Google : <https://admin.google.com>{rel="nofollow"}.

Cette section introduit les paramètres recommandés pour gérer des appareils Kiosques pour de l'affichage dynamique et/ou de l'affichage interactif.

### Création d'une unité organisationnelle

::note
Cette section est optionnelle. Si vous avez déjà configuré une unité organisationnelle pour regrouper vos appareils Kiosques, vous pouvez passer à la prochaine étape.
::

::tip
**Définition :**

:br

:br


Dans la 

**Console d'Administration de Google**

, une 

**Unité Organisationnelle**

 est un groupe qui permet de rassembler des utilisateurs et des appareils qui partagent les mêmes paramètres.


:br

:br


Les unités organisationnelles sont organisées de manière hiérarchique. Les unités enfantes héritent par défaut des paramètres de l'unité parente.
::

Dans le menu de la Console d'administration Google, naviguez dans **Annuaire → Unités organisationnelles**.

![Panneau des unités organisationnelles dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-uo.webp)

Cliquez ensuite sur le lien Créer une unité organisationnelle... en haut à droite de l'écran.

![Création d'une unité organisationnelle dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-uo-ajout.webp)

Dans la fenêtre, entrez les informations suivantes, puis cliquez sur le bouton Créer :

- **Nom de l'unité organisationnelle :*&#x2A; Entrer un nom pour le groupe &#x2A;(ex : Appareils kiosques)*.
- **Description :*&#x2A; &#x2A;(optionnel)* Entrer éventuellement une description pour le groupe.
- **Unité organisationnelle parente :*&#x2A; Spécifier l'unité organisationnelle parente &#x2A;(l'unité nouvelle créée héritera des paramètres de l'unité parente)*.

![Formulaire de création d'une unité organisationnelle dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-uo-formulaire.webp)

Vous avez désormais une unité organisationnelle dans laquelle vous pourrez enregistrer vos appareils et les configurer de manière centralisée.

### Créer un utilisateur d'inscription (optionnel)

::note
Cette section est totalement optionnelle. Il s'agit d'une bonne pratique recommandée par Google pour simplifier l'inscription des appareils dans les bonnes unités organisationnelles.
::

Une bonne pratique recommandée par Google est de créer un utilisateur dédié à l'enregistrement des appareils.

Commencez donc par créer un utilisateur comme vous le faites habituellement puis déplacez le dans l'unité organisationnelle dans laquelle vous souhaitez enregistrer votre appareil.

Une fois votre utilisateur créé et placé dans la bonne unité organisationnelle, naviguez dans **Appareils → Chrome → Paramètres → Utilisateurs et navigateurs** puis recherchez la section **Paramètres d'enregistrement**.

![Paramètres d'enregistrement des appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-enregistrement-parametres.webp)

::tip
Vérifiez que la bonne unité organisationnelle est sélectionnée avant de modifier les paramètres.
::

Sur le paramètre **Enregistrement de l'appareil**, sélectionnez la valeur **Placer l'appareil Chrome dans l'organisation de l'utilisateur**. Une fenêtre de confirmation apparaît, cliquez sur **OK**.

![Options des paramètres d'enregistrement des appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-enregistrement-conserver.webp)

Ensuite, cliquez sur le bouton **Enregistrer** en haut à droite de l'écran pour valider votre configuration.

![Enregistrement des paramètres d'enregistrement des appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-enregistrement-enregistrer.webp)

### Configuration de l'appareil

::note
Les paramètres exposés ci-dessous ne sont ni exhaustifs ni universels. Il s'agit d'un ensemble de configuration recommandé pour une bonne expérience Kiosque.
::

Dans le menu de la Console d'administration Google, naviguez dans **Appareils → Chrome → Paramètres → Appareils**.

![Paramètres d'appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-home.webp)

::tip
Vérifiez que la bonne unité organisationnelle est sélectionnée avant de modifier les paramètres.
::

#### Paramètres d'affichage

Dans la zone de recherche, entrez le terme **affichage** pour filtrer la liste de paramètres.

Dans la section **Paramètres de l'écran**, nous recommandons les paramètres suivants :

- Échelle de l'écran externe : &#x2A;*100%**
- Échelle de l'écran interne : &#x2A;*100%**

![Paramètres d'affichage dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-affichage.webp)

#### Paramètres de kiosque

Dans la zone de recherche, entrez le terme **kiosque** pour filtrer la liste de paramètres.

![Paramètres kiosques d'appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-kiosque.webp)

Dans la section **Paramètres de mise à jour de l'appareil**, nous recommandons les paramètres suivants :

- Autoriser les appareils à mettre à jour automatiquement la version de l'OS : **Autoriser les mises à jour**.
- Version cible : **Utiliser la dernière version disponible**.
- Effectuer un rollback vers la version cible : **Ne pas effectuer de rollback de l'OS**.
- Version cible : **Version stable**.
- Plan de déploiement : **Par défaut**.
- Fenêtre supplémentaire d'arrêt complet : **Ajoutez vos horaires d'ouverture de votre établissement (horaires durant lesquelles vous ne souhaitez pas de mises à jour). Les horaires doivent être entrées jour par jour**.
- Redémarrer automatiquement après les mises à jour : **Autoriser les redémarrages automatiques**.

*Pour plus d'informations sur ces paramètres, [cliquez ici](https://support.google.com/chrome/a/answer/1375678?hl=fr#zippy=%2Cparam%C3%A8tres-de-mise-%C3%A0-jour-automatique){rel="nofollow"}*.

![Paramètres d'arrêt d'appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-arrets.webp)

Dans la section **Paramètres de kiosque**, nous recommandons les paramètres suivants :

- Mode d'envoi des alertes relatives à l'état des appareils en mode kiosque : **Cochez au moins une case*&#x2A; &#x2A;(email ou sms)*.
- Coordonnées auxquelles envoyer les alertes relatives à l'état des appareils en mode kiosque : **Entrez au moins une adresse email ou un numéro de téléphone*&#x2A; &#x2A;(en fonction de la case cochée au dessus)*.

*Pour plus d'informations sur ces paramètres, [cliquez ici](https://support.google.com/chrome/a/answer/1375678?hl=fr#zippy=%2Cmode-denvoi-des-alertes-relatives-%C3%A0-l%C3%A9tat-des-appareils-en-mode-kiosque%2Ccoordonn%C3%A9es-auxquelles-envoyer-les-alertes-relatives-%C3%A0-l%C3%A9tat-des-appareils-en-mode-kiosque){rel="nofollow"}*.

![Paramètres d'alertes d'appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-alertes.webp)

Dans la section **Paramètres d'alimentation du kiosque**, nous recommandons les paramètres suivants :

- Délai d'inactivité en minutes : **0**.
- Délai d'avertissement d'inactivité en minutes : **0**.
- Action en cas d'inactivité : **Ne rien faire**.
- Délai d'assombrissement de l'écran en minutes : **0**.
- Délai d'extinction de l'écran en minutes : **0**.

![Paramètres d'alimentation d'appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-alimentation.webp)

Une fois tous les paramètres saisis, vous pouvez cliquer sur le bouton **Enregistrer** en haut à droite de l'écran.

![Enregistrement des paramètres d'appareils dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-appareil-enregistrer.webp)

### Associer l'appareil à Touchify depuis la Console d'administration Google

L'application Touchify Player peut être configurée à distance depuis la Console d'administration Google.

Dans le menu de la Console d'administration Google, naviguez dans **Appareils → Chrome → Applications et extensions → Kiosques** puis cliquez sur l'application **Touchify Player** précédemment installée.
Pour installer l'application **Touchify Player**, référez vous au paragraphe [Option 3 : installation kiosque](https://help.touchify.io/#option-3-installation-kiosque).

![Panneau des applications kiosques dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-associer.webp)

::tip
Vérifiez que la bonne unité organisationnelle est sélectionnée avant de modifier les paramètres.
::

Dans la fenêtre de paramètres de l'application, modifiez le paramètres **Configuration gérée** avec la valeur suivante :

```json
{ "DeploymentKey": "<votre clé de déploiement>" }
```

Par exemple, si votre clé de déploiement est **123 456 789 123**, la valeur devra être :

```json
{ "DeploymentKey": "123456789123" }
```

![Paramètres d'application kiosque dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-config.webp)

Cliquez ensuite sur le bouton **Enregistrer** en haut à droite de l'écran.

![Enregistrement des paramètres d'application kiosque dans Google Admin](https://help.touchify.io/4-touchify-player/3-installation/4-chromeos/fr-player-chrome-admin-kiosque-config-enregistrer.webp)

C'est terminée, l'application Touchify Player va automatiquement s'associer dans le groupe de diffusion sélectionné sur tous les périphériques présent dans l'**Unité Organisationnelle** sélectionnée.


# Guide d'installation Tizen

## Installer l'application

Ouvrir l'outil **Lancement de l'URL** de Tizen

![Ecran d'accueil de Tizen](https://help.touchify.io/4-touchify-player/3-installation/5-tizen/fr-player-tizen-accueil.webp)

Dans les paramètres, entrer l'URL suivante :&#x20;:b&#x72;&#x2A;*<https://get.touchify.io/tizen>{rel="nofollow"}**

![Lancement d'URL sur Tizen](https://help.touchify.io/4-touchify-player/3-installation/5-tizen/fr-player-tizen-lanceur.webp)

::caution
Dans certaines anciennes versions de Tizen, l'URL mentionnée ci-dessus ne fonctionne pas en raison d'un problème de certificats.
Il s'agit d'une faille de sécurité sur ces version de Tizen, nous recommandons donc de mettre à jour le firmware de l'écran. L'URL fonctionnera et la faille sera corrigée.


:br

:br


Si la mise à jour du firmware est impossible, il est possible d'installer l'application en utilisant l'URL suivante :


:br

**<https://touchifyapplications.blob.core.windows.net/tizen>{rel="nofollow"}**
::

## Associer l'écran à un groupe de diffusion

Utilisez votre clé de déploiement pour associer l'appareil à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association de l'appareil](https://help.touchify.io/4-touchify-player/3-installation/0-common/fr-player-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).


# Guide d'installation BrightSign

## Pré-requis

### Mise à jour du firmware

Pour un fonctionnement optimal, pensez à mettre à jour le firmware de votre player BrightSign.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://www.brightsign.biz/downloads/overview
variant: primary
---
Téléchargements BrightSign
::

### Installation du firmware

1. Téléchargez la version correspondant à votre appareil
2. Copiez le fichier .bsfw à la racine de votre carte SD ou micro SD
3. Insérez la carte dans le player BrightSign
4. Démarrez le player pour mettre à jour le firmware
5. La LED d'alimentation clignote pour indiquer que la mise à jour est en cours

## Télécharger l'application

### Utiliser le package standard

Si votre player BrightSign est déjà configuré ou que vous souhaitez le configurer avec vos propres outils, téléchargez directement le package standard.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io/brightsign
variant: primary
---
Télécharger le package BrightSign
::

### Pré-configurer mon package

Vous pouvez également pré-configurer votre player BrightSign pour Touchify puis télécharger le package prêt à l'emploi.

::u-button
---
icon: i-lucide-settings
target: _blank
to: https://get.touchify.io/brightsign/config
variant: primary
---
Ouvrir le configurateur BrightSign
::

![Configurateur Touchfy de player BrightSign](https://help.touchify.io/4-touchify-player/3-installation/6-brightsign/fr-player-brightsign-configurateur.webp)

## Installer l'application

Extraire le package téléchargé à l'étape précédente à la racine d'une carte SD ou micro SD puis insérer la carte dans le player BrightSign.

![Aperçu de l'archive ZIP du player BrightSign](https://help.touchify.io/4-touchify-player/3-installation/6-brightsign/fr-player-brightsign-zip.webp)

## Associer un écran à un groupe de diffusion

Utilisez une clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur player BrightSign](https://help.touchify.io/4-touchify-player/3-installation/6-brightsign/fr-player-brightsign-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).


# Guide d'installation Linux & Raspberry PI

## Installer l'application

### Option 1 : script d'installation

Touchify met à disposition un script pour simplifier l'installation et la configuration de l'application Touchify Player quelque soit votre environnement. Quelques étapes suffisent pour une installation optimisée et sécurisée.

```bash
curl https://get.touchify.io/linux/install.sh | bash -
```

### Option 2 : installation manuelle

Accédez à la page de téléchargement de l'application Touchify Player et téléchargez la version correspondant à votre système d'exploitation.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Télécharger Touchify Player
::

## Associer un écran à un groupe de diffusion

Utilisez une clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur Linux et Raspberry PI](https://help.touchify.io/4-touchify-player/3-installation/7-linux/fr-player-linux-association.webp)


# Guide d'installation macOS

## Télécharger l'application

L'installation sur macOS se fait à partir d'un package DMG.

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Télécharger Touchify Player
::

## Installer l'application

Ouvrir le package DMG, puis glisser Touchify dans le dossier Applications.

![Installateur DMG sur macOS](https://help.touchify.io/4-touchify-player/3-installation/8-macos/fr-player-macos-dmg.webp)

## Se connecter

L'application Touchify Player propose 2 modes d'authentification.

### Se connecter avec un compte utilisateur

Utilisez vos identifiants pour vous connecter à votre compte utilisateur et accéder à vos projets publiés.

![Connexion utilisateur sur macOS](https://help.touchify.io/4-touchify-player/3-installation/8-macos/fr-player-macos-connexion.webp)

### Associer un écran à un groupe de diffusion

Utilisez une clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur macOS](https://help.touchify.io/4-touchify-player/3-installation/8-macos/fr-player-macos-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).


# Guide d'installation iOS et iPadOS

## Installer l'application

Utilisez Safari sur votre iPhone ou iPad pour accéder à l'URL : <https://player.touchify.io>{rel="nofollow"}

Ouvrir les paramètres du navigateur et sélectionner **Ajouter à l'écran d'accueil**.

Captures

C'est terminé, l'application Touchify Player est installée sur votre appareil et accessible à partir de l'écran d'accueil.

## Se connecter

L'application Touchify Player propose 2 modes d'authentification.

### Se connecter avec un compte utilisateur

Utilisez vos identifiants pour vous connecter à votre compte utilisateur et accéder à vos projets publiés.

![Connexion utilisateur sur iOS](https://help.touchify.io/4-touchify-player/3-installation/9-ios/fr-player-ios-connexion.webp)

### Associer un écran à un groupe de diffusion

Utilisez une clé de déploiement pour associer l'ordinateur à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association d'écran sur iOS](https://help.touchify.io/4-touchify-player/3-installation/9-ios/fr-player-ios-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).

## Configurer un mode kiosque

Voici deux options pour configurer un iPad en mode kiosque.

### Option 1 : le mode Single App

Comme son nom l'indique, ce mode permet de verrouiller l'appareil à une seule application.
Bien qu'efficace, cette méthode peut être contraignante : elle nécessite d'utiliser l'application Apple Configurator depuis un Mac ou d'utiliser une solution de MDM.

Pour **Apple Configurator**, connectez simplement l'iPad avec un câble USB. Une fois l'appareil reconnu, activez le **Mode Supervisé**, puis dans le menu **Actions / Advanced**, sélectionnez **Start Single App Mode** et sélectionnez l'application **Touchify Player**.

### Option 2 : le mode Accès Guidé

L'avantage de cette méthode est qu'elle ne nécessite aucun outil et peut-être effectuée directement sur l'appareil.
Commencez par activer la fonctionnalité **Accès Guidé** à partir des paramètres généraux de l'iPad et configurer les **Paramètres de mot de passe**.

Capture

Une fois la fonctionnalité activée, lancez l'application Touchify Player puis cliquez 3 fois sur le bouton Accueil de l'iPad pour démarrer l'accès guidé. Configurez selon vos besoins puis cliquez sur Démarrer.

Capture

Pour quitter l'accès guidé, cliquez 3 fois sur le bouton Accueil et entrez le mot de passe.

Capture


# Guide d'installation Android TV

## Configuration initiale

### Compte Google

Généralement Android TV demande de connecter l'appareil avec un compte Google. Vous pouvez créer un compte spécifique pour votre projet, par exemple &#x2A;<mycustomer.mycompany.signage@gmail.com>*.

Sur certains appareils il est possible d'ignorer cette étape. Auquel cas, Google Play ne sera pas disponible et l'installation d'application nécessitera de connecter l'appareil à un ordinateur.
Plus d'informations dans la section [Installer une application avec ADB](https://help.touchify.io/#utiliser-adb-pour-installer-une-application-optionnel).

### Premier démarrage

Avant de commencer l'installation de Touchify sur votre player Android TV, quelques étapes sont nécessaires pour démarrer le player.
Commencez par brancher le player à votre écran et à l'alimentation puis suivez les instructions sur l'écran :

1. Associer la télécommande
2. Sélectionner la langue de l'interface et la région
3. Passer l'étape &#x2A;*"Configurer le rapidement la TV avec votre téléphone Android"**
4. Connecter le player à votre réseau Wi-Fi
5. Se connecter avec un compte Google
6. Accepter les &#x2A;*"Conditions d'utilisation"**
7. Sur l'étape &#x2A;*"Services Google"** :

   - Décocher &#x2A;*"Utiliser la position"**
   - Décocher &#x2A;*"Aider à améliorer Android"**
   - Cliquer &#x2A;*"Accepter"**
8. Sur l'étape &#x2A;*"Google Assistant"*&#x2A;, sélectionner &#x2A;*"Non, merci"**
9. Sur l'étape &#x2A;*"Installer d'autres applications"*&#x2A;, décocher &#x2A;*"Installer toutes les applis suivantes"*&#x2A;, puis &#x2A;*"Continuer"**
10. Sur l'étape &#x2A;*"Rester informé"*&#x2A;, sélectionner &#x2A;*"Non, merci"**
11. Sur l'étape &#x2A;*"Sélectionner vos abonnements"*&#x2A;, cliquer sur &#x2A;*"Continuer"**

## Installer les prérequis

### Installer l'application Downloader

1. Ouvrir "Google Play"
2. Rechercher "Downloader"
3. Sélectionner "Downloader by AFTVnews"
4. Cliquer sur "Installer"

*Note : Si Google Play n'est pas disponible, utiliser ADB pour installer Touchify directement. Plus d'informations dans la section [Installer une application avec ADB](https://help.touchify.io/#utiliser-adb-pour-installer-une-application-optionnel).*

![Téléchargement de Downloader sur Google Play](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-downloader.webp)

### Mettre à jour la webview

1. Ouvrir &#x2A;*"Google Play"**
2. Rechercher &#x2A;*"webview"**
3. Sélectionner &#x2A;*"Android System Webview"**
4. Cliquer sur &#x2A;*"Mettre à jour"**

*Note : Si Google Play n'est pas disponible, utiliser ADB pour mettre à jour la webview. Plus d'informations dans la section [Installer une application avec ADB](https://help.touchify.io/#utiliser-adb-pour-installer-une-application-optionnel).*

![Téléchargement de WebView sur Google Play](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-webview.webp)

## Configurer le player

### Mettre à jour le système

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Préférences relative à l'appareil"*&#x2A; puis &#x2A;*"A propos"**
3. Cliquer sur &#x2A;*"Mise à jour du système"**
4. Si une mise à jour est disponible, l'installer

### Supprimer les restrictions du player

::note
En restant sur la page "A propos", commencer à l'étape 3.
::

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Préférences relative à l'appareil"*&#x2A; puis &#x2A;*"A propos"**
3. Naviguer sur &#x2A;*"Build"**
4. Cliquer **7*&#x2A; fois sur &#x2A;*"Build"**

### Changer le nom du périphérique

::note
En restant sur la page "A propos", commencer à l'étape 3.
::

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Préférences relative à l'appareil"*&#x2A; puis &#x2A;*"A propos"**
3. Cliquer sur &#x2A;*"Nom de l'appareil"*&#x2A; puis &#x2A;*"Modifier"**
4. Sélectionner &#x2A;*"Saisir un nom personnalisé"**
5. Saisir un nom identifiable &#x2A;(ex : screen-client-1)*
6. Cliquer sur &#x2A;*"Entrée"** sur le clavier

### Désactiver l'écran de veille

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Préférences relative à l'appareil"*&#x2A; puis &#x2A;*"Options pour les développeurs"**
3. Activer &#x2A;*"Ecran toujours actif"**
4. Cliquer sur &#x2A;*"Retour"*&#x2A; pour retour sur la page de &#x2A;*"Préférences relative à l'appareil"**
5. Naviguer dans &#x2A;*"Economiseur d'écran"**
6. Dans &#x2A;*"Economiseur d'écran"*&#x2A;, sélectionner &#x2A;*"Sommeil"**
7. Dans &#x2A;*"Mettre l'appareil en veille"*&#x2A;, sélectionner &#x2A;*"Jamais"**

### Supprimer les applications

::tip
Il est conseillé de supprimer ou désactiver les applications non utilisées.
::

::note
Note : il est possible d'utiliser l'application ADB TV pour simplifier cette opération (réf. section 

[Installer l'application ADB TV](https://help.touchify.io/#utiliser-adb-pour-installer-une-application-optionnel)

)
::

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Applications"**
3. Sélectionner une application à supprimer
4. Cliquer sur &#x2A;*"Désinstaller"*&#x2A; ou &#x2A;*"Désactiver"**

### Mettre à jour les applications

1. Ouvrir le &#x2A;*"Google Play"**
2. Cliquer sur l'icone de l'utilisateur en haut à droite de l'écran
3. Naviguer sur &#x2A;*"Gérer les applications et les jeux"*&#x2A; puis &#x2A;*"Mise à jour"**
4. Cliquer sur &#x2A;*"Tout mettre à jour"**

### Autoriser Downloader à installer des applications

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Applications"*&#x2A; puis &#x2A;*"Sécurité et restrictions"*&#x2A; puis &#x2A;*"Sources inconnues"**
3. Cocher &#x2A;*"Downloader"**

### Désactiver les recommandations et la synchronisation

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Comptes et connexion"**
3. Sélectionner votre compte
4. Décocher &#x2A;*"Jouer automatiquement les trailers"**
5. Cocher &#x2A;*"Applications uniquement"*&#x2A; et cliquer sur &#x2A;*"Activer"**
6. Décocher les synchronisations &#x2A;*"Agenda"*&#x2A;, &#x2A;*"Contacts"*&#x2A;, et &#x2A;*"Google Play Films et TV"**

## Installer Touchify Player

Sur l'écran d'accueil :

1. Ouvrir &#x2A;*"Downloader"**
2. Autoriser &#x2A;*"Downloader"** à accéder aux photos, contenus multimédias et fichiers sur votre appareil
3. Dans la barre d'adresse, entrer l'URL suivante : **get.touchify.io/android**
4. Après le téléchargement, une fenêtre de confirmation apparaît, cliquer sur &#x2A;*"Installer"**
5. Après l'installation, cliquer sur &#x2A;*"OK"*&#x2A; &#x2A;(ne pas ouvrir l'application pour l'instant)*

![Téléchargement de Touchify Player sur Downloader](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-download.webp)

![Installation de Touchify Player sur Downloader](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-installe.webp)

## Ajouter les permissions à Touchify Player

### Autoriser l'application à se lancer au démarrage

1. Naviguer dans les paramètres du player &#x2A;(en haut à droite de l'écran)*
2. Naviguer dans &#x2A;*"Applications"*&#x2A;, puis &#x2A;*"Accès spécifiques des applications"*&#x2A;, puis &#x2A;*"Superposer aux autres applications"**
3. Activer &#x2A;*"Touchify Player"**
4. Il est recommandé de **désactiver toutes les autres applications**

![Autoriser la superposition de Touchify dans les paramètres d'Android TV](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-superposition.webp)

### Autoriser l'application à se mettre à jour

1. Retourner dans le menu &#x2A;*"Applications"**
2. Naviguer dans &#x2A;*"Sécurité et restrictions"*&#x2A; puis &#x2A;*"Sources inconnues"**
3. Activer &#x2A;*"Touchify Player"**
4. Eventuellement, désactiver &#x2A;*"Downloader"**

![Autoriser la mise à jour de Touchify dans les paramètres d'Android TV](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-maj.webp)

## Associer l'écran à votre compte

Depuis l'écran d'accueil :

1. Ouvrir &#x2A;*"Touchify Player"**
2. Entrer votre clé de déploiement (voir [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction))

![Association d'un écran sur Android TV](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-association.webp)

::note
Au premier démarrage, une popup s'affiche pour vous inviter à lancer automatiquement Touchify Player au démarrage de l'appareil, cliquer sur 

**"Activer"**

.
::

![Autorisation de démarrage automatique de Touchify sur Android TV](https://help.touchify.io/4-touchify-player/3-installation/10-android-tv/fr-player-androidtv-boot.webp)

## Utiliser ADB pour installer une application (optionnel)

### Où trouver ADB ?

Si les outils de développement Android sont installés sur votre ordinateur, ADB se trouve dans le dossier *platform-tools* du SDK, par exemple *AppData/Local/Android/Sdk/platform-tools*.

Vous pouvez également télécharger ADB sur [Google Android Developpers](https://developer.android.com/studio/releases/platform-tools){rel="nofollow"}.

### Où trouver les applications ?

Plusieurs sites référencent les applications Android, par exemple [APK Mirror](https://www.apkmirror.com/){rel="nofollow"}.

Rechercher une application et sélectionner la version la plus récente correspondant à votre version d'Android.

L'application Touchify Player est accessible sur notre site Internet :

::u-button
---
icon: i-lucide-download
target: _blank
to: https://get.touchify.io
variant: primary
---
Télécharger Touchify Player
::

### Installer une application

En ligne de commande, dans le dossier contenant ADB :

```bash
adb install -r "PATH\TO\FILE\package.apk"
```

## Configurer un mode kiosque avancé (optionnel)

### Installer l'application ADB TV

::note
Si l'appareil est déjà connecté via ADB, vous pouvez ignorer cette étape. L'application ADB TV permet un accès à ADB directement depuis l'appareil.
::

A partir du Google Play, rechercher l'application ADB TV puis installer.

Si le Google Play n'est pas disponible, installer l'application avec ADB.

### Définir Touchify comme application d'Accueil

Exécuter la commande suivante pour définir Touchify comme application d'Accueil

```bash
## A partir d'une ligne de commande
adb shell pm set-home-activity co.touchify.player/co.touchify.cordova.plugin.launcher.LauncherActivity

## A partir de la console ADB TV
pm set-home-activity co.touchify.player/co.touchify.cordova.plugin.launcher.LauncherActivity
```

Exécuter la commande suivante pour désactiver l'application d'accueil par défaut :

```bash
## A partir d'une ligne de commande
adb shell pm disable-user --user 0 com.google.android.tvlauncher

## A partir de la console ADB TV
pm disable-user --user 0 com.google.android.tvlauncher
```

### Rétablir l'écran d'accueil par défaut

Exécuter les commandes suivantes pour rétablir l'écran d'accueil par défaut :

```bash
## A partir d'une ligne de commande
adb shell pm enable --user 0 com.google.android.tvlauncher
adb shell pm set-home-activity com.google.android.tvlauncher/.MainActivity

## A partir de la console ADB TV
pm enable --user 0 com.google.android.tvlauncher
pm set-home-activity com.google.android.tvlauncher/.MainActivity
```


# Guide d'installation LG webOS

## Installer l'application

Accéder aux paramètres de l'écran et ouvrir la **Configuration SI Server**.

![Paramètres webOS](https://help.touchify.io/4-touchify-player/3-installation/11-webos/en-player-webos-ez-setting.webp)

Entrer la configuration suivante :

- Activer l'option **Nom de domaine complet**
- Saisir l'URL suivante : &#x2A;*<https://get.touchify.io/webos>{rel="nofollow"}**
- Sélectionner le **Mode de lancement des applications** : **Local**
- Sélectionner le **Type d'application** : **IPK**
- Sélectionner le mode de **Mise à niveau de l'application locale** : **Distant**
- Cliquer sur **Confirmer** puis **OK**
- Redémarrer l'écran

![Paramètres webOS](https://help.touchify.io/4-touchify-player/3-installation/11-webos/en-player-webos-si-server-setting.webp)

## Associer l'écran à un groupe de diffusion

Utilisez votre clé de déploiement pour associer l'appareil à un ou plusieurs groupes de diffusion et le contrôler à partir de Touchify Publisher.

![Association de l'appareil](https://help.touchify.io/4-touchify-player/3-installation/0-common/fr-player-association.webp)

Pour en savoir plus, consultez l'article [Introduction à Touchify Publisher](https://help.touchify.io/../../touchify-publisher/introduction).


# Guide d'installation E-Paper Philips

::note
Les écrans e-paper ont un fonctionnement différent des écrans classiques.
A ce titre, l'installation de l'application Touchify Player sur ces écrans nécessite une configuration spécifique.
::

## Introduction

Touchify pour e-paper inclut deux modes de fonctionnement différents :

**Mode connecté :** :br
L'écran est connecté à Internet et à Touchify. Les contenus sont créés depuis l'interface de Touchify et sont publiés sur le e-paper à distance. :br
C'est le mode adapté pour centraliser l'ensemble de vos contenus et contrôler leur diffusion sur vos écrans e-paper.
L'ensemble des fonctionnalités de Touchify sont disponibles, notamment les widgets et les données dynamiques.
Les seules différences sont l'absence de la lecture vidéo et des animations, qui ne sont pas compatibles avec les écrans e-paper.

**Mode autonome :** :br
L'écran n'est pas connecté à Internet ni à Touchify. Les contenus sont chargés sur l'écran depuis un smartphone ou une tablette via le hotspot Wi-Fi de l'écran.
C'est le mode adapté pour diffuser des contenus sur un écran e-paper sans connexion Internet, ou pour contrôler simplement et rapidement un écran e-paper localement.
Dans ce mode, l'écran peut recevoir des images et des documents PDF.

## Pré-requis

Pour installer Touchify Player sur un écran e-paper Philips, vous devez disposer de :

- Un écran e-paper de la marque Philips
- Un cable USB -> micro-USB pour connecter l'écran à un ordinateur
- Un ordinateur sous Windows pour exécuter l'installateur

Sur l'ordinateur, vous aurez besoin des logiciels suivants :

- Le driver USB pour les écrans e-paper Philips : [Téléchargement](https://touchifyapplications.blob.core.windows.net/epaper/android/philips/DriverAssitant_v5.1.1.zip){rel="nofollow"}
- Le logiciel **scrcpy** pour voir l'écran de l'e-paper sur votre ordinateur : [Téléchargement](https://github.com/Genymobile/scrcpy/releases/latest){rel="nofollow"}
- L'installateur Touchify pour e-paper : [Téléchargement](https://touchifyapplications.blob.core.windows.net/epaper/android/installer/installer.exe){rel="nofollow"}

### Installer le driver USB

Avant de connecter l'écran à votre ordinateur, vous devez installer le driver USB pour les écrans e-paper Philips.
Téléchargez le driver depuis le lien ci-dessus, puis extrayez le fichier ZIP et exécutez le fichier `DriverInstall.exe` pour installer le driver.

### Connecter l'écran à l'ordinateur

Pour commencer, connectez l'écran e-paper à votre ordinateur à l'aide du cable USB -> micro-USB.
Le port micro-USB se trouve à l'arrière de l'écran, à côté du port d'alimentation et du port USB-A.

::u-page-grid
  :::u-page-card{title="Philips 13BDL4150IW"}
  ![Ports de l'écran e-paper Philips 13BDL4150IW](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-ports-13.webp)
  :::

  :::u-page-card{title="Philips 24BDL4050I"}
  ![Ports de l'écran e-paper Philips 24BDL4050I](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-ports-24.webp)
  :::

  :::u-page-card{title="Philips 32BDL5150I"}
  ![Ports de l'écran e-paper Philips 32BDL5150I](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-ports-32.webp)
  :::
::

## Lancer l'installateur e-paper

Une fois l'écran connecté à votre ordinateur, téléchargez l'installateur Touchify pour e-paper depuis le lien ci-dessus et exécutez le fichier `installer.exe` pour lancer l'installation de Touchify Player sur l'écran e-paper.
L'installateur détecte automatiquement l'écran connecté et propose de sélectionner le mode d'installation.

![Ecran de sélection du mode](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-mode.webp)

::note
Si vous souhaitez utiliser le mode autonome, 

[cliquez ici](https://help.touchify.io/#local-standalone-installation)

 pour accéder directement à la section correspondante de ce guide.
::

### Standard Touchify installation

Sélectionner le mode "Standard Touchify installation" pour installer Touchify Player en mode connecté.
Dans ce mode, l'écran e-paper est connecté à Internet et à Touchify, et les contenus sont créés depuis l'interface de Touchify et publiés sur le e-paper à distance.
C'est le mode adapté pour centraliser l'ensemble de vos contenus et contrôler leur diffusion sur vos écrans e-paper.
L'ensemble des fonctionnalités de Touchify sont disponibles, notamment les widgets et les données dynamiques.
Les seules différences sont l'absence de la lecture vidéo et des animations, qui ne sont pas compatibles avec les écrans e-paper.

#### Personnaliser le nom de l'écran

L'installateur propose de personnaliser le nom de l'écran e-paper afin de faciliter son identification dans Touchify Publisher.
Entrer le nom que vous souhaitez donner à votre écran e-paper, ou laisser le champ vide pour conserver le nom par défaut.

![Personnalisation du nom de l'écran](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-name.webp)

#### Personnaliser le logo de démarrage

L'installateur propose de personnaliser le logo de démarrage de l'écran e-paper afin de retirer le logo Philips par défaut.
Taper "y" et sélectionner un logo dans la liste proposée, ou sélectionner "n" pour conserver le logo Philips par défaut.

![Personnalisation du logo de démarrage](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-logo.webp)

#### Fin de l'installation

L'installateur configure l'écran e-paper et installe Touchify Player. Une fois l'installation terminée, l'application démarre automatiquement.

#### Connecter l'écran à Touchify

Pour connecter l'écran à Touchify, vous devez associer l'écran à un groupe de diffusion.
Pour cela, rendez-vous dans Touchify Publisher, créez un groupe de diffusion et copiez la clé de déploiement du groupe.

Pour insérer la clé de déploiement dans l'écran, télécharger l'application `scrcpy` en utilisant le lien ci-dessus.
Entrez la clé de déploiement dans le champ prévu à cet effet, puis cliquez sur "Connect" pour connecter l'écran à Touchify.

:nuxt-img{.mx-auto alt="Association de l'écran" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-connect.webp" width="300"}

::note
Utilisez également scrcpy pour configurer les autres paramètres Android que votre installation nécessite, tels que la connexion Wi-Fi de l'écran e-paper à votre réseau local.
::

### Local standalone installation

Sélectionner le mode "Local standalone installation" pour installer Touchify Player en mode autonome.
Dans ce mode, l'écran n'est pas connecté à Internet ni à Touchify. Les contenus sont chargés sur l'écran depuis un smartphone ou une tablette via le hotspot Wi-Fi de l'écran.
C'est le mode adapté pour diffuser des contenus sur un écran e-paper sans connexion Internet, ou pour contrôler simplement et rapidement un écran e-paper localement.
Dans ce mode, l'écran peut recevoir des images et des documents PDF.

#### Personnaliser le nom de l'écran

L'installateur propose de personnaliser le nom de l'écran e-paper afin de faciliter son identification.
Entrer le nom que vous souhaitez donner à votre écran e-paper, ou laisser le champ vide pour conserver le nom par défaut.

![Personnalisation du nom de l'écran](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-name.webp)

#### Configuration du hotspot Wi-Fi

L'installateur vous demande si vous souhaitez configurer les identifiants du hotspot Wi-Fi de l'écran e-paper. Taper "y" pour configurer le hotspot Wi-Fi, ou "n" pour conserver les identifiants par défaut.
Si vous choisissez de configurer le hotspot Wi-Fi, entrez le nom du réseau (SSID) et le mot de passe que vous souhaitez utiliser pour le hotspot Wi-Fi de l'écran e-paper.

![Configuration du hotspot Wi-Fi](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-hotspot.webp)

#### Personnaliser le logo de démarrage

L'installateur propose de personnaliser le logo de démarrage de l'écran e-paper afin de retirer le logo Philips par défaut.
Taper "y" et sélectionner un logo dans la liste proposée, ou sélectionner "n" pour conserver le logo Philips par défaut.

![Personnalisation du logo de démarrage](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-logo.webp)

#### Configuration des paramètres du mode autonome

L'installateur vous demande si vous souhaitez configurer les paramètres du mode autonome. Taper "y" pour configurer les paramètres du mode autonome, ou "n" pour conserver les paramètres par défaut.

![Configuration des paramètres du mode autonome](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-installer-standalone.webp)

Les paramètres du mode autonome sont les suivants :

- **Would you like to show a QR code on startup for easy remote connection?** : :br Taper "y" pour afficher un QR code au démarrage de l'écran e-paper pour permettre une connexion facile depuis un smartphone ou une tablette ou "n" pour ne pas afficher le QR code.
- **Would you like to show Wi-Fi information on the device?** : :br Taper "y" pour afficher les informations de connexion Wi-Fi (SSID et mot de passe) sur l'écran e-paper lors du démarrage de l'écran ou "n" pour ne pas afficher les informations de connexion Wi-Fi.
- **Enter the number of minutes of inactivity before the device automatically shuts down?** : :br Entrez le nombre de minutes d'inactivité avant que l'écran e-paper ne s'éteigne automatiquement. Taper "0" pour désactiver l'extinction automatique.

## Utilisation du mode standalone

Cette section a pour objectif de vous présenter les étapes pour charger des contenus sur l'écran e-paper en mode autonome.

### Se connecter au hotspot Wi-Fi de l'écran e-paper

Lors du démarrage, si vous avez activer l'option d'affichage des informations de connexion Wi-Fi, les identifiants du hotspot Wi-Fi de l'écran e-paper sont affichés à l'écran.
Un QR-code est également affiché. En le scannant, votre smartphone se connecte automatiquement au hotspot Wi-Fi de l'écran e-paper.

![Ecran de démarrage en mode autonome](https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-startup.webp)

### Lancer l'application web

Une fois connecté au hotspot Wi-Fi de l'écran e-paper, ouvrez un navigateur web sur votre smartphone ou votre tablette et entrez l'adresse IP affichée sur l'écran e-paper pour accéder à l'application web de gestion du mode autonome.
L'écran affichage également un QR code pour vous connecter facilement à l'application web.

### Intégrer la license de l'écran

Lors de votre première connexion, l'application vous demande d'intégrer la license de l'écran e-paper pour activer le mode autonome.
Si vous ne l'avez pas encore, faites une demande à votre revendeur ou votre intégrateur en précisant le numéro de série de l'écran e-paper.
Le numéro de série est indiqué en bas de la page de license ou sur l'étiquette à l'arrière de l'écran e-paper.

:nuxt-img{.mx-auto alt="Intégration de la license" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-license.webp" width="300"}

### Charger des contenus sur l'écran e-paper

Une fois connecté à l'application web, vous pouvez charger des contenus sur l'écran e-paper en cliquant sur le bouton "Changer le média".

:nuxt-img{.mx-auto alt="Accueil de l'application standalone e-paper" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-app-home.webp" width="300"}

Vous pouvez ensuite sélectionner une image ou un document PDF à charger sur l'écran e-paper depuis votre smartphone ou votre tablette.

:nuxt-img{.mx-auto alt="Sélection d'un média dans l'application standalone e-paper" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-app-browse.webp" width="300"}

Une fois le média sélectionné, si celui-ci est un document PDF, vous pouvez choisir la page à afficher sur l'écran e-paper.

:nuxt-img{.mx-auto alt="Sélection de la page d'un PDF dans l'application standalone e-paper" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-app-pdf.webp" width="300"}

Avant d'envoyer le média sur votre e-paper, vous pouvez recadrer le média sur votre smartphone afin de l'adapter à votre écran e-paper.

:nuxt-img{.mx-auto alt="Ajustement du média sur l'écran e-paper" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-crop.webp" width="300"}

Enfin, cliquez sur "Confirmer et envoyer" pour charger le média sur l'écran e-paper.

:nuxt-img{.mx-auto alt="Envoi du média sur l'écran e-paper" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-sending.webp" width="300"}:nuxt-img{.mx-auto alt="Confirmation de l'envoi du média sur l'écran e-paper" src="https://help.touchify.io/4-touchify-player/3-installation/12-epaper/philips-epaper-standalone-sent.webp" width="300"}

::note
Si votre écran e-paper est sur batterie, pensez en éteindre l'écran e-paper après avoir chargé votre média pour économiser la batterie.
Vous pouvez cliquer sur le bouton "Eteindre l'epaper" dans l'application web pour éteindre l'écran e-paper à distance.
Votre image restera disponible sur l'écran e-paper même lorsque celui-ci est éteint.
::


# Déblocage du mode kiosque

## Introduction

Votre application Touchify Player ne synchronise plus vos contenus automatiquement ? Vous n'arrivez plus à connecter l'application ? Vous n'arrivez pas à sortir du mode kiosque ?
Cet article vous aide à dépanner l'application dans un cas de blocage.

::note
**Cet article concerne notamment les appareils verrouillés en mode kiosque.**
::

## Afficher les outils

Selon la configuration de l'application, les outils peuvent être accessibles en appuyant longuement sur l'écran.
Si les barres d'outils sont verrouillées, cliquez successivement sur les 4 coins de l'écran, en partant du coin à haut à gauche, dans le sens des aiguilles d'une montre.

Si un mot de passe a été défini, entrez le mot de passe pour accéder aux outils et aux paramètres de l'application.

## Vérifier la connexion Internet

Si l'appareil est connecté à Internet, le bouton **Synchroniser** est présent dans la barre d'outil en bas de l'écran.
Lancer une synchronisation pour valider la connexion. En cas d'erreur de synchronisation, un message d'erreur apparaîtra.
Il s'agit généralement de problème de configuration réseau.

::note
**Configuration réseau**

:br

:br


En cas de problème réseau, veuillez contacter votre service informatique pour demander l'autorisation des URLs suivantes :


:br

:br


\**.touchify.io, 

*.touchify.app, *.blob.core.windows.net,*.table.core.windows.net*
::

::note
**Vous pouvez également vérifier la connexion de vos appareils dans Touchify Publisher.**
::

## Fermer l'application

Si vous souhaitez fermer l'application verrouillée et accéder au système d'exploitation, ouvrir les paramètres à partir du bouton en haut à gauche de l'écran puis cliquer sur **Fermer l'application**.

Avec un clavier, `` + `` permet également de fermer l'application.

### Mode Kiosque

Attention, en mode kiosque sécurisé, l'interface du système d'exploitation peut être désactivée, auquel cas vous aurez besoin d'un clavier.

::tip
**Astuce Windows**

:br


Utiliser 

``

 \+ 

``

 \+ 

``

 pour ouvrir le gestionnaire de tâches ou 

``

 \+ 

``

 \+ 

``

.
::

::caution
**Désactiver le mode kiosque**

:br


Si vous souhaitez retrouver l'interface du système d'exploitation, désactiver le mode kiosque à partir des paramètres de l'application, section 

*Paramètres système*

.
::

## Réinitialiser l'application

### A partir des paramètres

Accéder aux paramètres de l'application, section **Synchronisation**, puis sélectionner **Supprimer les données**. L'application sera réinitialisée et devra être reconnectée.

### A partir du système

Supprimer les données de l'application Touchify Player.

#### Windows, Linux, MacOS

Fermer l'application et ouvrir l'explorateur de fichier. Accéder au dossier de données de l'application et supprimer le dossier. Une fois le dossier supprimé, relancer et reconnecter l'application.

```bash
# Windows
%APPDATA%\co.touchify.player

# Linux
~/.config/co.touchify.player

# Mac OS
~/Library/Application Support/co.touchify.player
```

::tip
**Astuce Windows**

:br


Si l'interface graphique est désactivée, utiliserCtrl+Shift+Esc pour ouvrir le gestionnaire de tâches puis lancer l'explorateur de fichiers : Fichier > Exécuter > explorer.exe
::

::caution
**Reconnexion de l'appareil**

:br


Après une réinitialilsation à partir du système, l'appareil n'a pas été déconnecté, il devra être supprimé manuellement à partir de la liste des écrans dans Touchify Publisher.
::

#### Android

Accéder aux paramètres de Android, section **Applications**. Sélectionner **Touchify Player** puis **Supprimer les données de l'application**.

## Nous contacter

En cas de problème, veuillez [contacter le support](https://touchify.io/contact){rel="nofollow"}.


# Introduction

## Nos tips & tricks

::card-group
  :::card
  ---
  icon: i-lucide-file-play
  title: Optimiser une vidéo
  to: https://help.touchify.io/fr/tips-tricks/optimize-video
  ---
  Découvrez comment réduire le poids de vos vidéos pour optimiser leur chargement et les performances de vos contenus.
  :::

  :::card
  ---
  icon: i-lucide-image-plus
  title: Créer une image interactive
  to: https://help.touchify.io/fr/tips-tricks/interactive-image
  ---
  Concevez des boutons et des fenêtres pour dynamiser votre image.
  :::

  :::card
  ---
  icon: i-lucide-gallery-vertical
  title: Créer une zone de défilement
  to: https://help.touchify.io/fr/tips-tricks/scrollable-content
  ---
  Découvrez comment créer du contenu défilant.
  :::
::


# Les raccourcis clavier

::note
Le caractère 

``

 représente la touche Commande de MacOS.
::

## Raccourcis généraux

| Raccourci Windows | Raccourci macOS | Action                         |
| ----------------- | --------------- | ------------------------------ |
| `` + ``           |                 | Prévisualiser le projet        |
| `` + `` + ``      | `` + `` + ``    | Prévisualiser la page          |
| `` + ``           | `` + ``         | Publier le projet              |
| `` + ``           | `` + ``         | Annuler la dernière opération  |
| `` + ``           | `` + ``         | Rétablir la dernière opération |

## Interface

| Raccourci Windows       | Raccourci macOS         | Action                             |
| ----------------------- | ----------------------- | ---------------------------------- |
| `` + `` + ``            | `` + `` + ``            | afficher l'explorateur de fichiers |
| `` + `` + ``            | `` + `` + ``            | afficher les présentations         |
| `` + `` + ``            | `` + `` + ``            | afficher les pages                 |
| `` + `` + ``            | `` + `` + ``            | afficher les widgets               |
| `` + `` + `` ou `` + `` | `` + `` + `` ou `` + `` | afficher les éléments              |
| `` + `` + ``            | `` + `` + ``            | afficher l'historique              |

## Affichage

| Raccourci | Action                                        |
| --------- | --------------------------------------------- |
| `` + ``   | adapter le zoom à la taille de l'écran        |
| `` + ``   | zoom 100%                                     |
| `` + ``   | augmenter le zoom                             |
| `` + ``   | réduire le zoom                               |
| `` + ``   | afficher/masquer les règles                   |
| `` + ``   | afficher/masquer la grille                    |
| `` + ``   | afficher/masquer les guides                   |
| `` + ``   | afficher/masquer les guides du modèle         |
| `` + ``   | activer/désactiver le magnétisme              |
| `` + ``   | activer les animations                        |
| ``        | masquer l'interface et activer les animations |

## Manipuler la sélection

| Raccourci Windows   | Raccourci macOS   | Action                                                                 |
| ------------------- | ----------------- | ---------------------------------------------------------------------- |
| `` + `Clic`         |                   | ajouter/retirer un élément à la sélection                              |
| `` + `Clic`         |                   | ajouter un élément à la sélection                                      |
| ``                  |                   | annuler la sélection                                                   |
| `` ou `` + ``       | `` ou `` + ``     | supprimer la sélection                                                 |
| `` + ``             | `` + ``           | copier la sélection                                                    |
| `` + ``             | `` + ``           | coller la sélection dans la page courante ou tout autre page ou widget |
| `` + ``             | `` + ``           | dupliquer la sélection                                                 |
| ``, ``, ``, ``      |                   | déplacer la sélection dans une direction                               |
| `` + ``, ``, ``, `` |                   | déplacer la sélection par pallier dans une direction                   |
| `` + `` / ``        | `` + `` / ``      | avancer ou reculer la sélection                                        |
| `` + `` + `` / ``   | `` + `` + `` / `` | avancer au premier ou reculer à l'arrière plan                         |

## Transformer la sélection

Lors de la transformation à partir d'un coin ou d'un côté de la sélection, maintenir appuyé :

| Raccourci | Action                                                    |
| --------- | --------------------------------------------------------- |
| ``        | pour déformer la sélection sans conserver les proportions |
| ``        | pour forcer une sélection carrée                          |
| ``        | pour conserver le centre de la sélection                  |

## Dessiner

::note
Ces raccourcis s'appliquent sur toute opération de dessin (dessiner une zone de texte, dessiner une forme...)
::

Lors du dessin, maintenir appuyé :

| Raccourci | Action                             |
| --------- | ---------------------------------- |
| ``        | pour conserver les proportions     |
| ``        | pour forcer un dessin carrée       |
| ``        | pour conserver le centre du dessin |
| ``        | annuler le dessin                  |

## Éditeur de texte

| Raccourci Windows | Raccourci macOS | Action             |
| ----------------- | --------------- | ------------------ |
| `` + `` à ``      | `` + `` à ``    | Titre 1 à 6        |
| `` + ``           | `` + ``         | Gras               |
| `` + ``           | `` + ``         | Italique           |
| `` + ``           | `` + ``         | Souligné           |
| `` + ``           | `` + ``         | terminer l'édition |

## Explorateur de fichier

| Raccourci Windows                  | Raccourci macOS | Action                                                   |
| ---------------------------------- | --------------- | -------------------------------------------------------- |
| `` et `` + ``                      |                 | basculer du panneau des dossiers au panneau des fichiers |
| `` + ``                            |                 | passer de la vue Grille à la vue Liste des fichiers      |
| ``, ``, ``, ``                     |                 | se déplacer dans les dossiers ou les fichiers            |
| `` / `&#x60; &#x2A;(Page Up/Down)* |                 | se déplacer dans les fichiers par pallier                |
| ``                                 |                 | ouvrir le dossier ou insérer le fichier                  |
| `` ou `` + ``                      | `` ou `` + ``   | supprimer le dossier ou le fichier                       |
| ``                                 |                 | aller au dossier précédent                               |
| `` + ``                            |                 | aller au dossier suivant                                 |
| `` + ``                            |                 | aller au dossier parent                                  |
| `` + ``                            |                 | créer un dossier                                         |
| `` + ``                            |                 | importer un ou plusieurs fichiers                        |
| `` + ``                            |                 | rechercher dans les fichiers                             |

## Fenêtre ou message

| Raccourci | Action              |
| --------- | ------------------- |
| ``        | valider / confirmer |
| ``        | fermer la fenêtre   |


# Optimiser une vidéo

## Introduction

Touchify supporte de nombreux formats vidéos. Toutefois pour une meilleure compatibilité nous conseillons les formats **MP4** et **WebM**.

Nous vous proposons dans cet article une solution pour optimiser les vidéos importées dans Touchify.
Bien évidemment cette solution n'est pas unique et de nombreux outils sont disponibles.
Nous utiliserons ici deux outils gratuits sans limitations contraignantes :

- Any Video Converter (PC, Mac)
- Video Smaller (en ligne)

## Première étape : Any Video Converter

Any Video Converter (AVC) est un logiciel gratuit, disponible sur PC et Mac, offrant un grand nombre de fonctionnalités de traitement vidéo et de très bonnes performances dans la gestion des fichiers MP4.

Commençons par une première phase d'optimisation avec les options suivantes :

- Format MP4 (catégorie HTML5)
- Conserver la taille originale
- Qualité élevée

Selon les caractéristiques du fichier original, le poids peut être divisé par 5 en moyenne.
Par exemple, 200 Mo pour un fichier original de 1 Go, sans perte de qualité.

::note
Il est également possible de réduire les dimensions de la vidéo. Cependant nous conseillons de réaliser cette opération dans la prochaine étape.
::

## Seconde étape : Video Smaller

Video Smaller (VS) est une solution en ligne permettant de compresser et redimensionner des vidéos avec ou sans perte de qualité.
La limitation principale concerne le poids des fichiers, limité à 500 Mo.

### Compression

L'option de compression maximale est très efficace et permet une réduction importante du poids tout en conservant une qualité satisfaisante.
Pour une qualité optimale sélectionner l'option **Use low compression level**.

### Redimensionnement

Selon les périphériques ciblés ou la taille d'affichage de la vidéo dans votre projet, il est conseillé de réduire les dimensions de la vidéo et ainsi réduire encore le poids du fichier final.

## Résultats obtenus

Voici un exemple de résultats obtenus à partir d'un fichier vidéo MP4 de **1.1 Go** sans redimensionnement, sans perte de qualité ou perte modérée :

### Première compression avec AVC en qualité élevée

Poids final : **196 Mo**, soit **divisé par 5**.

### Seconde compression avec VS en qualité élevée

Poids final : **118 Mo**, soit **divisé par 10**.

### Seconde compression avec VS en compression maximale

Poids final : **72 Mo**, soit **divisé par 15**.

## Conclusion

Si une seule solution devait être conservée, Video Smaller est celle qui offre les meilleurs résultats tout en restant très simple d'utilisation. L'inconvénient principal est la durée de l'opération en raison des temps de chargement pour envoyer puis télécharger le fichier.

Au contraire Any Video Converter permet d'obtenir une première compression très rapidement. La combinaison des 2 outils nous semble être une solution optimale.


# Tuto : créer une image interactive

## Étape 1 : choisir une image

Dépliez l'onglet &#x2A;*"Galerie"*&#x2A; &#x2A;(pictogramme image)&#x2A; du menu latéral gauche puis sélectionnez l'image de votre choix. Pour l'insérer, cliquez sur le bouton &#x2A;*"+"** ou glissez-la directement dans la page.

Au préalable, n'oubliez pas [d'importer vos images dans la galerie](https://help.touchify.io/../touchify-studio/elements/media).

Personnalisez la taille et l'alignement de votre image dans la fenêtre &#x2A;*"Option"*&#x2A; &#x2A;(pictogramme viseur)*, à droite du plan de travail.

![Explorateur de fichier dans Touchify Studio](https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-explorer.webp)

## Étape 2 : créer des boutons

### Bouton texte

Cliquez sur le bouton &#x2A;*"Texte"** dans le menu d'insertion. Choisissez le style de texte que vous souhaitez appliquer ou dessinez directement le bouton dans la page.

Personnalisez l'aspect du bouton dans les onglets de &#x2A;*"Personnalisation de l'élément"*&#x2A; &#x2A;(pictogramme viseur)* à droite du plan de travail.
Modifiez le style du texte et du bloc à votre convenance : modifiez les angles, ajoutez une couleur d'arrière-plan, appliquez une ombre...

:nuxt-img{.w-full alt="Création d'un bouton Texte dans Touchify Studio" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-bouton-texte.webp"}

::tip
Découvrez l'étendue des outils de 

[texte](https://help.touchify.io/../touchify-studio/elements/texts)

 et de 

[bloc](https://help.touchify.io/../touchify-studio/elements/background-and-borders)

 dans les articles dédiés.
::

### Bouton image

Cliquez sur le bouton &#x2A;*"Image"*&#x2A; dans le menu d'insertion. Choisissez l'image que vous souhaitez ajouter puis cliquez sur le bouton &#x2A;*"+"** ou glissez l'image directement dans la page.

Personnalisez l'aspect de l'image dans les onglets de &#x2A;*"Personnalisation de l'élément"*&#x2A; &#x2A;(pictogramme viseur)* à droite du plan de travail.
Modifiez l'image et le style du bloc à votre convenance : ajoutez un contour, appliquez une ombre, ajustez la taille de l'image...

:nuxt-img{.w-full alt="Création d'un bouton Image dans Touchify Studio" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-bouton-image.webp"}

::tip
Découvrez l'étendue des outils 

[d'arrière-plan et de bordure](https://help.touchify.io/../touchify-studio/elements/background-and-borders)

 dans l'article dédié.
::

## Étape 3 : appliquer une fenêtre au bouton

Sélectionnez le bouton puis cliquez sur l'onglet &#x2A;*"Interactions sur l'élément"*&#x2A; &#x2A;(pictogramme touch)&#x2A; dans le menu latéral droit.
Choisissez l'option &#x2A;"Fenêtre texte"* et personnalisez les différents paramètres :

- **Définissez l'activation de la fenêtre*&#x2A; dans l'onglet &#x2A;*"Déclencheur"** : l'option *Touch* est sélectionnée par défaut, déroulez le menu pour choisir une autre action de déclenchement
- **Insérez votre texte*&#x2A; dans l'onglet &#x2A;*"Contenu de la fenêtre"**
- **Modifiez la taille et la position*&#x2A; de la fenêtre dans les onglets &#x2A;*"Dimensions"*&#x2A; et &#x2A;*"Position"** : ces paramètres peuvent être entièrement personnalisés ou bien rattachés à ceux du bouton déclencheur
- **Détaillez les conditions de fermeture*&#x2A; de la fenêtre dans l'onglet &#x2A;*"Options de fermeture"**
- **Personnalisez le style*&#x2A; du texte et de la fenêtre dans les onglets &#x2A;*"Personnalisation du texte"*&#x2A; et &#x2A;*"Personnalisation de la fenêtre"** : retrouvez les mêmes outils de personnalisation que pour les éléments de page

![Edition d'une fenêtre texte dans Touchify Studio](https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-fenetre-texte.webp)

::tip
Découvrez les 

[différents types de fenêtres](https://help.touchify.io/../touchify-studio/interactions/dialogs)

 dans l'article dédié.
::

## Étape 4 : prévisualiser

Pour prévisualiser le projet, cliquez sur le bouton &#x2A;*"Aperçu"** en haut à gauche du plan de travail.
Ce mode vous permettra de visualiser et de tester les interactions que vous venez de créer.

:nuxt-img{alt="Bouton aperçu dans Touchify Studio" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-preview.webp"}

Pour quitter le mode, cliquez sur le boutons &#x2A;*"Fermer"** en haut à droite de la fenêtre.

:nuxt-img{alt="Bouton de fermeture de l'aperçu dans Touchify Studio" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-preview-fermer.webp"}

Exemples d'images interactives :

:nuxt-img{.w-full alt="Exemple d'image interactive d'un oiseau" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-exemple-oiseau.webp"}:br:nuxt-img{.w-full alt="Exemple d'image interactive d'une chaussure" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-exemple-chaussure.webp"}:br:nuxt-img{.w-full alt="Exemple d'image interactive d'un panorama" provider="none" src="https://help.touchify.io/5-tips-tricks/4-interactive-image/fr-tips-image-exemple-panorama.webp"}

::note
Découvrez comment créer une zone de défilement dans 

[l'article dédié](https://help.touchify.io/scrollable-content)
::


# Tuto : zone de défilement

## Les éléments compatibles avec le défilement

Cette fonctionnalité peut être appliquée à plusieurs types d'éléments. Elle s'active dans l'onglet **Personnalisation de l'élément*&#x2A; &#x2A;(pictogramme cible)* à droite du plan de travail :

- **Texte** : cochez l'option *Autoriser le défilement* dans la fenêtre *Options de défilement*
- **Menu** : cochez l'option *Autoriser le défilement* dans la fenêtre *Options d'affichage*
- **Composant personnalisé** : choisissez l'option *Défilement* dans le menu *Mode d'affichage* de la fenêtre *Composant*
- **Fenêtres texte & personnalisée** : cochez l'option *Autoriser le défilement* dans la fenêtre *Options de défilement*

## Création d'un composant personnalisé défilant

### Étape 1 : créer le contenu

Ajoutez à votre page les éléments qui apparaitront dans la zone.

Pour choisir une image, dépliez l'onglet &#x2A;*"Galerie"*&#x2A; &#x2A;(pictogramme image)&#x2A; du menu latéral gauche puis sélectionnez l'image de votre choix.
Pour l'insérer, cliquez sur le bouton &#x2A;*"+"** ou glissez la directement dans la page.

Pour ajouter d'autres types de médias (vidéos, pdf...) dépliez **l'onglet correspondant** du menu latéral gauche. Insérez votre média de la même manière qu'une image.
Au préalable, n'oubliez pas [d'importer vos médias dans la galerie](https://help.touchify.io/../touchify-studio/elements/media).

Personnalisez la taille et la position de votre image dans la fenêtre &#x2A;*"Option"*&#x2A; &#x2A;(pictogramme viseur)*, à droite du plan de travail.

![Explorateur de fichier dans Touchify Studio](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-explorer.webp)

Pour ajouter du texte, cliquez sur le bouton &#x2A;*"Texte"** dans le menu d'insertion.
Choisissez le style que vous souhaitez appliquer ou dessinez directement le bloc dans la page.

Personnalisez l'élément dans les onglets de &#x2A;*"Personnalisation de l'élément"*&#x2A; &#x2A;(pictogramme viseur)* à droite du plan de travail.
Modifiez le style du texte et du bloc à votre convenance : changez la typographie, la taille, la couleur du texte, ajoutez un fond coloré au bloc...

:nuxt-img{.w-full alt="Création d'un bouton Texte dans Touchify Studio" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-bouton-texte.webp"}

::tip
Découvrez l'étendue des outils de 

[texte](https://help.touchify.io/../touchify-studio/elements/texts)

 et de 

[bloc](https://help.touchify.io/../touchify-studio/elements/background-and-borders)

 dans les articles dédiés.
::

### Étape 2 : transformer en composant

Dans un premier temps, assurez-vous que **tous les éléments de votre future zone** soient réunis dans votre page, disposés à l'emplacement souhaité.
**Certains éléments doivent dépasser**, de manière à ce que la zone de défilement soit visible dans sont entièreté ; laissez dans la page les éléments qui apparaitront en priorité.

![Exemple de contenu prêt pour être converti en composant défilant](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-exemple.webp)

Sélectionnez tous vos éléments puis effectuez un clic droit : choisissez l'option &#x2A;*"Transformer en composant"** dans la fenêtre.

Nommez votre composant et modifiez ses paramètres dans la **fenêtre de configuration*&#x2A;. Les dimensions et la position sont entrées automatiquement, vous n'avez pas besoin de les modifier.
Une fois la configuration terminée, cliquez sur le bouton &#x2A;*"Valider"**.

::div{.mt-4.grid.sm:grid-cols-2.gap-4.max-w-full}
![Action de transformer une sélection en composant](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-transformer.webp)
![Formulaire de création de composant](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-formulaire.webp)
::

### Étape 3 : configurer le composant

Le composant est automatiquement **inséré dans la page, à l'emplacement où il a été créé**.
Ajustez sa taille pour qu'il s'adapte aux dimensions de la page : les éléments en surplus doivent maintenant être invisibles, **cachés dans le bloc du composant**.

Pour autoriser le défilement, sélectionnez le composant puis accédez aux fenêtres de l'onglet &#x2A;*"Personnalisation de l'élément"*&#x2A; &#x2A;(pictogramme viseur)&#x2A; dans le menu latéral droit :
dans la fenêtre &#x2A;*"Composant"**, sélectionnez le mode d'affichage *Défilement*.

![Configurer le mode défilement sur un composant](https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-config.webp)

::note
Vous pouvez modifier votre composant à tout moment : sélectionnez-le puis cliquez sur le bouton 

**"Modifier"**

 

*(pictogramme crayon)*

 dans la fenêtre de personnalisation, à droite du plan de travail.


:br

:br


Vous pouvez également accéder à l'espace de gestion des composants : dans le menu inférieur de la fenêtre 

**"Pages"**

, à gauche du plan de travail, cliquez sur le bouton 

**"Composant"**

 

*(pictogramme C)*

.
Sélectionnez votre composant pour le modifier.


:br

:br


Pour revenir dans les pages du projet, cliquez sur le bouton 

**"Pages du projet"**

 

*(pictogramme page)*

 dans le même menu.
::

### Étape 4 : prévisualiser

Pour prévisualiser le projet, cliquez sur le bouton &#x2A;*"Aperçu"** en haut à gauche du plan de travail. Ce mode vous permettra de visualiser et de tester la zone de défilement que vous venez de créer.

:nuxt-img{alt="Bouton aperçu dans Touchify Studio" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-preview.webp"}

Pour quitter le mode, cliquez sur le boutons &#x2A;*"Fermer"** en haut à droite de la fenêtre.

:nuxt-img{alt="Bouton de fermeture de l'aperçu dans Touchify Studio" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-preview-fermer.webp"}

## Options de défilement automatique

Tandis que le défilement classique se déclenche par interaction, le défilement automatique se joue indépendamment.
Pour activer cette option, cliquez sur l'onglet &#x2A;*"Personnalisation de l'élément"*&#x2A; &#x2A;(pictogramme cible)&#x2A; dans le menu de droite puis dépliez la fenêtre &#x2A;*"Options de défilement"**.

:nuxt-img{alt="Options de défilement automatique" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-defilement-auto.webp" width="450"}

1. Choisissez la vitesse de défilement
2. Définissez le délais d'activation du défilement
3. Modifiez le type de défilement : retour au début, défilement inversé, défilement continu, entrée et sortie
4. Visualisez le défilement que vous venez de configurer

::note
Le défilement automatique peut être appliqué à tous les éléments cités au début de l'article, ainsi qu'aux navigateurs web
::

:nuxt-img{.w-full alt="Démonstration d'un défilement automatique dans Touchify" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-demo.webp"}

## Exemples de défilement :

:nuxt-img{.w-full alt="Exemple de contenu défilant d'un oiseau" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-exemple-oiseaux.webp"}:br:nuxt-img{alt="Exemple de contenu défilant d'un menu" provider="none" src="https://help.touchify.io/5-tips-tricks/5-scrollable-content/fr-tips-scroll-exemple-menu.webp" width="400"}:br:nuxt-img{.w-full alt="Exemple de contenu défilant d'un panorama" provider="none" src="https://help.touchify.io/5-tips-tricks/3-interactive-image/fr-tips-image-exemple-panorama.webp"}

::note
Découvrez comment créer une image interactive dans 

[l'article dédié](https://help.touchify.io/interactive-image)
::


# Tuto : intégration de données externes

## Tutoriel vidéo : l'intégration de données dans Touchify Studio

:iframe{allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen="true" frameBorder="0" height="315" referrerPolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/zW_Dfmgxp3M?si=Cm7ugJjwdYZZNA6C" title="YouTube video player" width="560"}


# Introduction

## Nos guides

::card-group
  :::card
  ---
  icon: i-lucide-credit-card
  title: Créer une clé d'API pour les terminaux de paiement dans Stripe
  to: https://help.touchify.io/fr/guides/stripe-terminal
  ---
  Découvrez comment accepter des paiements dans Touchify en connectant vos terminaux de paiement Stripe.
  :::
::


# Créer une clé d'API pour les terminaux de paiement dans Stripe

## Introduction

Touchify permet de lier votre compte Stripe afin de collecter des paiements via les terminaux Stripe sur des bornes tactiles.

Examinons la configuration de votre compte pour obtenir une clé d'API à la fois valide et sécurisée.

## Se connecter à son compte Stripe

Pour commencer, vous devez vous rendre sur le portail d'administration de Stripe : <https://dashboard.stripe.com>{rel="nofollow"}

Dans votre compte, vous devez naviguer dans la section **Développeurs** en cliquant sur le lien en haut à droite de votre écran.

Dans la section **Développeurs**, cliquez sur l'onglet **Clés d'API**.

## Créer une clé d'API limitée

::note
Afin de garantir votre sécurité, il est important de ne pas communiquer la clé secrète principale de votre compte.
Touchify vous permet de travailler avec un ensemble limité d'autorisations pour garantir la sécurité de votre compte.
::

Pour commencer, cliquez sur le bouton **Créer une clé limitée**. Dans la popup de confirmation, choisissez **Fournir cette clé à un autre site web** puis cliquez sur **Continuer**.

:nuxt-img{.mx-auto alt="Sélection du type de clé limitée dans Stripe" src="https://help.touchify.io/6-guides/2-stripe-terminal/fr-guides-stripe-cle-type.webp" width="400"}

Dans le formulaire, entrez un nom pour votre clé (&#x2A;par exemple : Touchify)&#x2A;, entrez l'url de notre site internet : &#x2A;<https://touchify.io>{rel="nofollow"}*, puis cochez la case **Personnaliser les autorisations liées à cette clé**.
Cliquez ensuite sur **Continuer** pour personnaliser vos autorisations.

:nuxt-img{.mx-auto alt="Création d'une clé limitée dans Stripe" src="https://help.touchify.io/6-guides/2-stripe-terminal/fr-guides-stripe-cle-limitee.webp" width="400"}

Nous allons maintenant configurer l'ensemble le plus limité possible d'autorisations :

- Dans la section **Ressources Principales**, cliquez sur **Aucune** pour désactiver toutes les autorisations. Cliquez ensuite sur **Écriture** sur la ressource **PaymentIntents**.
- Dans la section **Ressources Checkout**, cliquez sur **Aucune**.
- Dans la section **Ressources de facturation**, cliquez sur **Aucune**.
- Dans la section **Ressources Connect**, cliquez sur **Aucune**.
- Dans la section **Ressources affectées aux commandes**, cliquez sur **Aucune**.
- Dans la section **Ressources de Issuing**, cliquez sur **Aucune**.
- Dans la section **Ressources de reporting**, cliquez sur **Aucune**.
- Dans la section **Ressources affectées aux webhooks**, cliquez sur **Écriture**.
- Dans la section **Ressources affectées à l'interface de ligne de commande Stripe**, cliquez sur **Aucune**.
- Dans la section **Toutes les ressources Payment Links**, cliquez sur **Aucune**.
- Dans la section **Toutes les ressources Terminal**, cliquez sur **Écriture**.
- Dans la section **Taxe**, cliquez sur **Aucune**.
- Dans la section **Radar**, cliquez sur **Aucune**.
- Dans la section **Toutes les ressources Climate**, cliquez sur **Aucune**.

Enfin, cliquez sur **Créer une clé** pour générer votre clé secrète. Vous trouverez ensuite votre clé secrète dans la page **Clé d'API**.

Vous pouvez cliquer sur **Révéler la clé secrète** pour afficher la clé et cliquer dessus pour la copier dans votre presse papier.


# Les Applications Touchify

## Rooms Manager

::card-group
  :::card
  ---
  icon: i-lucide-rectangle-ellipsis
  title: Se connecter à l'administration
  to: https://help.touchify.io/fr/applications/rooms-manager/login
  ---
  Découvrez comment se connecter sur Rooms manager avec votre compte administrateur.
  :::

  :::card
  ---
  icon: i-lucide-hotel
  title: Gestion des sites
  to: https://help.touchify.io/fr/applications/rooms-manager/sites
  ---
  Découvrez comment créer et gérer des sites pour organiser vos salles de réunion.
  :::

  :::card
  ---
  icon: i-lucide-ratio
  title: Gestion des salles de réunion
  to: https://help.touchify.io/fr/applications/rooms-manager/meeting-rooms
  ---
  Découvrez comment créer et configurer vos salles de réunion dans Rooms manager.
  :::

  :::card
  ---
  icon: i-lucide-users
  title: Gestion des utilisateurs
  to: https://help.touchify.io/fr/applications/rooms-manager/users
  ---
  Découvrez comment créer et gérer les utilisateurs pouvant réserver vos salles de réunion dans Rooms Manager.
  :::

  :::card
  ---
  icon: i-lucide-ticket-check
  title: Réserver une salle pour un utilisateur
  to: https://help.touchify.io/fr/applications/rooms-manager/booking
  ---
  Découvrez comment réserver une salle pour un utilisateur depuis l'administration de Rooms Manager.
  :::
::


# Se connecter à l'administration

## Accéder à la plateforme Rooms Manager

Pour accéder à la plateforme Rooms manager, vous pouvez utiliser le lien suivant : <https://admin.roomsmanager.app/>{rel="nofollow"&#x7D; ou
directement le lien de votre organisation &#x2A;[https://admin.roomsmanager.app/{mon-organisation}](https://admin.roomsmanager.app/%7Bmon-organisation%7D){rel="nofollow"}*.

Vous serez alors redirigé vers la page de connexion de Touchify, pour vous connecter, utilisez vos identifiants habituels de Touchify.

![Connexion utilisateur à l'administration](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-login.webp)

::note
**Remarque :**

:br


Pour vous connecter, veuillez utiliser vos identifiants utilisés lors de votre inscription à Touchify.
::

## Tableau de bord

Vous voilà arrivé sur le portail d'administration de Rooms Manager.

La page d'accueil correspond à votre tableau de bord d'activité. Vous retrouvez sur cette page le résumé de votre organisation ainsi qu'une vision globale des réservations sur les 30 derniers jours.

![Tableau de bord de l'administration Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-dashboard.webp)

A gauche, un menu vous permet d'accéder aux différentes rubriques d'administration de votre espace Rooms Manager :

- **Salles :** Créer ou gérer vos salles de réunions ([en savoir plus](https://help.touchify.io/meeting-rooms)).
- **Sites :** Créer ou gérer les sites de votre organisation([en savoir plus](https://help.touchify.io/sites)).
- **Utilisateurs :** Créer ou gérer les utilisateurs pouvant réserver des salles([en savoir plus](https://help.touchify.io/users)).
- **Administrateurs :** Importer ou gérer vos administrateurs et leurs droits.
- **Organisation :** Configurer les paramètres de votre organisation.

::note
**Remarque :**

:br


Vous pouvez également accéder aux différentes rubriques en cliquant sur le nombre de sites, de salles ou d'utilisateur dans le Tableau de bord.
::


# Gestion des sites

::note
**Qu'est-ce qu'un Site ?**

:br

:br


Dans Rooms Manager, les sites permettent d'organiser vos salles de réunion et vos utilisateurs. Chaque site contient des salles de réunion qui héritent de sa configuration. De plus, lorsque vous ajoutez des utilisateurs, vous pouvez définir dans quels sites ils ont le droit de réserver des salles.


:br

:br


Un site peut correspondre à un étage, une zone géographique, une ville (comme dans l'exemple), un bâtiment...
::

## Gérer les sites

Pour accéder à la liste de vos sites, cliquez sur la rubrique **Sites** dans le menu à gauche de l'écran.

Vous pouvez ensuite cliquer sur une des vignettes pour configurer votre site.

![Listes des sites dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites.png)

## Créer un site

Pour créer un site, appuyez sur le bouton bleu **Créer un site** en haut à droite de l'écran.

![Listes des sites dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites.png)

Dans le formulaire, renseignez les différentes rubriques concernant le site que vous souhaitez créer puis cliquer sur le bouton **Sauvegarder** en haut à droite de l'écran.

Les informations obligatoires sont :

- **Nom du site :** nom public de ce site pour vos utilisateurs.
- **Fuseau horaire :** détermine dans quel fuseau horaire les réservations devront être enregistrées.

![Formulaire de création d'un site dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites-creer.webp)

Vous pouvez également configurer les règles de réservations pour ce site :

- **Unité de durée :** détermine l'unité de durée des réservations. Par exemple, si l'unité de durée est de 30 minutes, les réservations pourront être positionnées à 10h00, 10h30, 11h... et pourront avoir pour durée 30m, 1h, 1h30m, 2h...
- **Durée minimum :** détermine la durée minimum des réservations. Par défaut, cette option correspond à l'unité de durée.
- **Durée maximum :** détermine la durée maximum des réservations. Par défaut, aucun maximum n'est défini.
- **Horaires d'ouvertures :** détermine les jours et les tranches horaires pendant lesquelles il est possible de réserver des créneaux sur ce site.

::note
**Remarque :**

:br


Par défaut, ces informations sont héritées de la configuration de votre organisation.
::

## Configurer un site

Après avoir terminé la création d'un site, vous êtes redirigé sur la page du site. &#x2A;(Vous pouvez également naviguer vers cette page depuis la liste des sites)*.

Dans cette page, vous pouvez télécharger une image pour personnaliser son apparence dans l'application utilisateur. Pour modifier l'image du site, cliquer sur l'encart à droite de l'écran.

![Page de configuration d'un site dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites-page.webp)

Vous pouvez également retrouver toutes les informations sur votre site à travers les onglets :

- **Configuration :** Voir et modifier les règles de réservations.
- **Profil :** Voir et modifier le nom, le fuseau horaire ou la description du site.
- **Salles :** Voir et ajouter des salles de réunion dans ce site.
- **Utilisateurs :** Voir la liste des utilisateurs qui ont accès à ce site.

::note
**Remarque :**

:br


Après toute modification, pensez à cliquer sur bouton Sauvegarder pour les appliquer.
::

## Conclusion

De retour sur la rubrique Site, votre nouveau site est bien créé et disponible dans la liste.

![Liste des sites dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-sites-liste.webp)


# Gestion des salles de réunion

## Liste des salles

Lorsque vous êtes sur le portail d'administration de Rooms manager, cliquez sur la rubrique **Salles** dans le menu de gauche pour accéder à la liste de vos salles de réunion.

![Listes des salles de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms.png)

## Créer une salle de réunion

Pour créer une salle de réunion, commencez par cliquer sur le bouton **Créer une salle**.

::caution
**Attention :**

 Si vous avez configurer plusieurs sites, plusieurs boutons seront disponibles. Cliquez sur le bouton correspondant au site dans lequel vous souhaitez créer la salle de réunion.
::

![Listes des salles de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms.png)

Dans le formulaire de création, remplissez les différentes informations puis cliquer sur le bouton **Sauvegarder** en haut à droite de l'écran.

Les informations obligatoires sont :

- **Nom de la salle :** défini le nom public de la salle pour vos utilisateurs.
- **Site de la salle :*&#x2A; détermine le site qui héberge la salle de réunion. &#x2A;(Ce champ est généralement prérempli selon votre choix sur la page précédente)*.

Vous pouvez également configurer le profil public de votre page &#x2A;(ces informations seront visibles par les utilisateurs)* :

- **Capacité de la salle :** défini le nombre de personnes maximum autorisés dans cette salle.
- **Description de la salle :** défini une description courte de la salle.
- **Equipements :*&#x2A; détermine la liste des équipements disponible dans cette salle &#x2A;(entrez le nom de l'équipement puis cliquez sur "Entrée" ou "Tab" pour l'ajouter dans la liste)*.

::note
**Remarque :**

:br


Renseigner précisément ces données permet aux utilisateurs d'obtenir une description précise de la salle qu'ils souhaitent réserver.
::

![Formulaire de création d'une salle de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms-creer.png)

Vous pouvez également configurer les règles de réservations pour ce site :

- **Unité de durée :** détermine l'unité de durée des réservations. Par exemple, si l'unité de durée est de 30 minutes, les réservations pourront être positionnées à 10h00, 10h30, 11h... et pourront avoir pour durée 30m, 1h, 1h30m, 2h...
- **Durée minimum :** détermine la durée minimum des réservations. Par défaut, cette option correspond à l'unité de durée.
- **Durée maximum :** détermine la durée maximum des réservations. Par défaut, aucun maximum n'est défini.
- **Horaires d'ouvertures :** détermine les jours et les tranches horaires pendant lesquelles il est possible de réserver des créneaux sur ce site.

::note
**Remarque :**

:br


Par défaut, ces informations sont héritées de la configuration de votre organisation.
::

## Configurer une salle de réunion

Après avoir terminé la création d'une salle de réunion, vous êtes redirigé sur la page de la salle. &#x2A;(Vous pouvez également naviguer vers cette page depuis la liste des salles)*.

![Page de configuration d'une salle de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms-page.png)

Dans cette page, vous pouvez notamment télécharger une image pour personnaliser son apparence dans l'application utilisateur. Pour modifier l'image de la salle de réunion, cliquer sur l'encart à droite de l'écran.

L'image se télécharge instantanément, votre salle est personnalisée !

![Chargeement d'une image pour une salle de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-rooms-image.png)

Depuis cette page, vous retrouvez également toutes les informations sur votre salle de réunion à travers les onglets :

- **Réservations :** Voir et modifier les réservations de la salle.
- **Configuration :** Voir et modifier les règles de réservations pour la salle.
- **Profil :** Voir et modifier le nom, la description, la capacité ou les équipements de la salle.

::note
**Remarque :**

:br


Après toute modification, pensez à cliquer sur bouton Sauvegarder pour les appliquer.
::

## Votre salle est créée !

Celle-ci apparaît bien dans la liste des salles de réunion dans la rubrique **Salles**.


# Gestion des utilisateurs

::tip
**Qu'est-ce qu'un Utilisateur ?**

:br


Dans Rooms Manager, les utilisateurs sont les entités qui ont le droit de réserver des créneaux dans vos salles de réunions.
Il ne faut pas les confondre avec les Administrateurs qui sont les entités qui peuvent administrer les sites et les salles de réunion.
::

## Liste des utilisateurs

Lorsque vous arrivez sur la plateforme Rooms Manager, pour accéder à la liste de vos utilisateurs, cliquez sur la rubrique **Utilisateurs** dans le menu principal à gauche.

![Listes des utilisateurs dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users.webp)

::note
Remarque : les images sont seulement des exemples représentatifs
::

## Créer un utilisateur

Pour créer un nouvel utilisateur, cliquez sur le bouton bleu **Créer un utilisateur** en haut à droite de l'écran.

![Listes des utilisateurs dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users.webp)

Dans le formulaire de création, renseignez les différentes rubriques concernant votre nouvel utilisateur puis cliquez sur le bouton **Sauvegarder** en haut à droite de l'écran.

Les informations obligatoires sont :

- **Nom de l'utilisateur :*&#x2A; détermine le nom d'affichage de l'utilisateur &#x2A;(cette information est publique et visible par les autres utilisateurs, par exemple, lorsqu'il clique sur un créneau réservé)*.
- **Email de l'utilisateur :** défini l'email de l'utilisateur. Cet email servira d'identifiant de connexion sur l'application web et mobile.
- **Sites autorisés :** détermine le ou les sites dans lesquels l'utilisateur aura le droit de réserver des salles de réunions.

Vous pouvez également définir des informations de profil pour l'utilisateur.

![Formulaire de création d'un utilisateur dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-creer.png)

::caution
**Attention :**

 il est important de définir les sites autorisés. Sans cela, l'utilisateur ne pourra pas réserver de créneaux sur les tablettes et les applications.
::

## Code de réservation

Après avoir sauvegardé, vous obtenez le code de réservation de l'utilisateur. Ce code est très important, c'est avec celui-ci que l'utilisateur pourra réserver des créneaux sur les tablettes ou s'identifier sur les applications web et mobile.

::caution
**Attention :**

 le code de réservation ne s'affiche qu'une seule fois. Pensez à le copier et à l'envoyer à votre utilisateur.
::

![Code de réservation d'un utilisateur dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-code.png)

Après la fermeture de la fenêtre du code de réservation, votre nouvel utilisateur est bien créée, il est disponible dans la liste des utilisateurs.

![Listes des utilisateurs dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-liste.png)

## Configurer un utilisateur

Depuis la liste des utilisateurs, vous pouvez cliquer sur un élément de la liste pour accéder à sa configuration.

![Page de connexion d'un utilisateur dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-page.webp)

Dans cette page, vous pouvez modifier le nom, l'email ou la photo de l'utilisateur. Vous pouvez également accéder au reste de sa configuration via les onglets :

- **Profil :** voir et modifier les informations de profil de l'utilisateur
- **Sites :** sélectionner les sites dans lesquels l'utilisateur peut réserver des salles.

::tip
**Remarque :**

:br


Après toute modification, pensez à cliquer sur bouton Sauvegarder pour les appliquer.
::

## Réinitialiser le code de réservation

Depuis la page de configuration de l'utilisateur, vous pouvez **réinitialiser son code** de réservation. Pour se faire, cliquer sur le bouton Réinitialiser le code en haut à droite de la page.

![Réinitialisation du code de réservation d'un utilisateur dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-users-code-reset.png)

::caution
**Attention :**

 le code de réservation ne s'affiche qu'une seule fois. Pensez à le copier et à l'envoyer à votre utilisateur.
::


# Réserver une salle pour un utilisateur

## Accès au portail

Lorsque vous arrivez sur la plateforme Rooms Manager, un menu apparaît sur la gauche avec plusieurs rubriques : **Salles**, **Sites**, **Utilisateurs**, **Administrateurs** et **Organisation**.

Pour réserver une salle, commencez par naviguer vers la rubrique **Salles** puis cliquez sur la salle dans laquelle vous souhaitez placer votre réservation (dans notre exemple ce sera la **Salle Touch**).

![Listes des salles de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-rooms.png)

Vous serez alors rediriger vers la page de gestion de la salle sélectionnée. Dans cette page, vous retrouverez toutes les informations concernant la salle ainsi qu'un planning permettant de réserver un créneau.

![Page d'une salle de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-room.png)

## Sélectionner un créneau

Pour réserver un créneau dans votre salle, commencez par sélectionner la date à laquelle vous souhaitez positionner votre réservation puis cliquez sur l'horaire de début et de fin.

![Sélection d'un créneau dans une salle de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-select.png)

Continuer en choisissant l'utilisateur qui sera affecté à cette réservation puis cliquez sur le bouton &#x2A;*"Confirmer la réservation"**.

![Sélection d'un créneau dans une salle de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-confirm.png)

## Confirmation de réservation

Votre réservation est prise en compte immédiatement et communiquée à toutes les tablettes connectées.

Elle apparaît en rouge dans le planning indiquant que ce créneau est bien attribué. La salle de réunion ne sera donc plus disponible à ce créneau.

![Sélection d'un créneau dans une salle de réunion dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-booking-finished.png)


# Réserver une salle depuis la tablette

## Accès à la tablette

Lorsque vous accédez à la tablette de réservation de salle, vous choisissez la salle que vous souhaitez réserver et ensuite vous pouvez choisir le créneau qui vous convient (dans notre exemple ce sera la salle Touch).

![Écran d'accueil de la tablette de réservation de salle dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-home.webp)

::note
**Remarque :**

 L'exemple ci-dessus illustre une salle de réunion. Vous pouvez choisir parmi plusieurs salles de réunions.
::

## Choix du créneau

Vous pouvez soit appuyer sur le bouton violet "réserver un créneau" ou sélectionnez la date et le créneau directement en bas de l'écran. La couleur orange signifie l'heure de début de la réunion que vous allez programmer.

![Choix du créneau sur la tablette de réservation de salle dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-creneau.webp)

Pour terminer votre réservation, vous devez renseigner votre code utilisateur. Ce code est composé de six chiffres.

![Clavier pour entrer le code de réservation sur la tablette de réservation de salle dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-code.webp)

## Confirmation de réservation

Votre réservation est prise en compte immédiatement et communiquée à toutes les tablettes connectées.

![Confirmation de réservation sur la tablette de réservation de salle dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-confirm.webp)

Lorsque vous consultez le planning de réservation de votre salle, votre réservation apparaît en "rouge" indiquant que ce créneau est bien attribué. La salle de réunion ne sera donc plus disponible à ce créneau.

![Affichage du créneau réservé sur la tablette de réservation de salle dans Rooms Manager](https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-tablet-fin.webp)

::tip
Vous pouvez également annuler votre réservation depuis la tablette en cliquant sur le créneau puis en entrant votre code de réservation.
::


# Réserver une salle depuis l'application mobile

## Réserver une salles

### Accès sur le téléphone

Vous pouvez réserver une salle de réunion à distance depuis votre téléphone mobile. Il vous suffit de vous connecter directement sur l'application Rooms Manager avec vos identifiants.

:nuxt-img{alt="Connexion dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-login.png" width="200"}

### Choix de la salle de réunion

Une fois connecté, vous choisissez votre salle (dans notre exemple ce sera la salle Touch) en cliquant "réserver un créneau".

:nuxt-img{alt="Sélection d'une salle dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-salle.webp" width="200"}

### Choix de la date et heure de réservation

Choisissez sur le calendrier la date qui vous convient et cliquez dessus. Vous pouvez aussi choisir le mois en cliquant sur la flèche en haut à droite.

:nuxt-img{alt="Sélection de la date dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-date.webp" width="200"}

Ensuite vous voilà à la seconde étape, c'est-à-dire le choix de l'horaire. Les horaires qui apparaissent en vert sont disponibles. Cliquez sur l'horaire de votre choix et le temps de durée de votre réunion.

:nuxt-img{alt="Sélection de l'horaire dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-creneau.webp" width="200"}

La troisième étape affiche la date et l'horaire de votre réservation. Cliquez sur "confirmer ma réservation" (bouton vert).

:nuxt-img{alt="Confirmation de la réservation dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-details.webp" width="200"}

### Confirmation de réservation

Votre réservation est prise en compte et communiquée sur tous les appareils.

:nuxt-img{alt="Popup de confirmation de la réservation dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-confirm.webp" width="200"}

## Annuler une réservation

### Portail d'entrée

Lorsque vous vous connecter sur l'application Rooms manager, vous arrivez sur le portail d'entrée avec les sites de réservation auxquels vous avez accès (dans notre exemple, c'est l'entreprise Touchify avec ses 2 sites).

:nuxt-img{alt="Page d'accueil de l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-home.webp" width="200"}

### Annuler ma réservation

Pour annuler votre réservation, cliquez en haut à droite sur l'icone "mon compte", puis cliquez sur "mes réservations".

:nuxt-img{alt="Menu utilisateur dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-user.webp" width="200"}

Vos réservations apparaissent et vous pouvez annuler celle de votre choix (dans notre exemple, c'est la réservation ICONE Marseille). Cliquez sur l'icone "corbeille" à droite.

:nuxt-img{alt="Mes réservations dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-reservations.webp" width="200"}

Une fenêtre apparaît vous indiquant de confirmer l'annulation de votre réservation. Cliquez sur le bouton violet "annuler la réservation".

:nuxt-img{alt="Confirmation d'annulation de réservation dans l'application mobile de Rooms Manager" src="https://help.touchify.io/7-applications/2-rooms-manager/fr-apps-rm-mobile-annulation.webp" width="200"}

**C'est fait ! Le créneau que vous aviez réservé n'apparaît plus dans "mes réservations".**

::note
**Remarque :**

 Dès lors que vous ne voyez plus votre réservation de salle de réunion dans "mes réservations", considérez celle-ci comme confirmation d'annulation.
::