Skip to main content

Button Configuration

Configure your buttons, CTAs, Call to Action, button style, delete a button, etc.

Description

Whatever your objective (acquisition, engagement, or conversion), a game campaign aims to encourage participants to take specific actions (sign up for a newsletter, go to a Facebook or Instagram page, access a game or sales page, etc.). It is therefore essential to make these actions easy for users.

To do this, place "Call To Action" (CTA) buttons in strategic locations, with persuasive copy to guide participants toward the available options. The "Button" widget, accessible in the editor, fulfills this role perfectly and is a key element in your game journey.


Importing an image button

  1. Go to the "Buttons" tab in the sidebar and click on the upload area.

  2. Import your visuals: the buttons will be created automatically and ready to be used in your campaign.

  3. Select the button and drag it to the desired location.

💡 We advise you to import buttons in SVG format. Learn more.

Size of .SVG media

Unlike .PNG, .JPG, etc. formats, the .SVG format does not include pixel dimensions, so you will need to manually resize your buttons and images when importing them into the platform. This will not impact the quality of the visuals.

For resizing, use the handles at the left and right ends rather than the middle ones. Doing this will prevent the border area of your CTA or image from overlapping with a dynamic object (form field, other button, etc.):


Creating a button in the editor

Click on "Add a button style" or drag the "label" button directly onto the editing area.

  1. Click on the style editing icon or click on the button to access its editor.

  2. Customize the appearance:

You can modify:

  • Label: Text displayed in a text button

  • Font

  • Text size

  • Line spacing and letter spacing

  • Text alignment: left, centered, right, justified

  • Uppercase / Lowercase

  • Underline / Strikethrough

  • Button background color

  • Button border color

  • Button border thickness

  • Button corner rounding

  • Drop shadow and drop shadow color

  • Animation effects: learn more

The text (label) inside the button can be edited without going through the control panel, simply double-click on the text of a button (in "Text" style) within the editor.

The text immediately turns into an input field, allowing you to type your new label instantly.

✍️ Note: If you add your button to the editor without modifying the style's appearance beforehand, any changes made to this button will not affect the button styles in the sidebar.

It is now possible to precisely select a portion of text within your button to apply a unique style to it (changing the font, bold, italic, underline, specific color, etc.).

📚 Good to know: If you apply a custom style to part of the text, the attributes of this button (font, bold, size, etc.) will become identical on both the Desktop and Mobile versions. Device-specific style settings will then no longer apply to this button.


Button animation effects

"Choose Effect" Section: Choose an animation option for your text or image button. The available effects are: Shake bottom, Jello horizontal, Wobble bottom, Bounce top, Blink 2, and Pulsate background. These animations help bring energy to your pages and encourage clicks.

Each animation repeats every two seconds, except for Pulsate background, which loops continuously. Learn more.

  • For image buttons only: In addition to these options, you have the ability to add button animations on hover and on click. This allows you to create a button that reacts to your participants' actions, increasing its performance and the number of clicks.


Switching from an editor button to an image button

It is possible to change your button's style to switch from a text button to an image button. To do this:

  • Click on your text button on your page

  • Under "Style", select "Image Button"

  • Import the button visual by clicking "Upload"

Your text button has now been customized with an image.


Retrieving buttons from previous campaigns

It is possible to retrieve old buttons previously used in other campaigns. To do this, simply click on the "folder" icon right next to the image button upload area, then select the campaign from which you want to retrieve buttons in the drop-down list:


Button Link

"Redirect to"

This option allows you to redirect the participant to a page in your campaign, for example to have them replay a specific game, show them the instructions, or display a result. Select "None" if you do not want to redirect the participant to a page.

📚 Good to know: If a page is protected by security rules, the redirection may fail. Therefore, make sure to redirect participants to unprotected pages.

"Actions"

To configure an action on your button, click on it in the preview area. Then click on the "Actions" drop-down menu displayed at the bottom left of your screen.

1. Open a URL / Deeplink

Redirection to an external URL is ideal for guiding your audience to a landing page based on your campaign objectives:

  • To your e-commerce site to convert participations into purchases,

  • To a page presenting your products/services to increase your visibility and brand awareness,

  • To a commercial partner's page for the game campaign.

💡 You can add an automatic redirection to a campaign page by configuring the "Redirect to" option.

There are 3 types of settings:

  • External URL: Allows redirection to the URL of your choice. By default, the option to open in a new tab is enabled, but you can choose to disable it.
    ​Use case: Redirecting your participants to a website page, content presentation, advertisement, etc.

Below the option to open in a new tab, you have the option to enter a Deeplink, which allows, among other things, opening specific pages on mobile applications via webview integrations. Learn more about the option.

💡 Certain customization options, such as opening links in a new tab, are strictly individual. They apply independently to each configured language: modifying a setting in one language version will not impact the other languages.

  • URL associated with a page: Allows redirection to a URL linked to content—to be used notably with the Swiper and Gift Finder. Use case: Boost traffic to your site with a button that converts the preferred/selected product selection into a purchase.

  • URL associated with the won prize: Valid only if you have set up a prize on your campaign and if you have added a redirection URL (see the paragraph "create a physical prize"). Use cases: participants will access the description page of the won product or will be able to be immediately redirected to your e-commerce site to use a discount code won on an Instant Win.

2. Send an email

This configuration requires the Emailing option. The user will be able to enter an email address (their own or a friend's) to send an email that you have previously configured via the Emailing editor (sharing results obtained, encouraging registration, etc.).
​


3. Open a campaign

This action is very useful if you are running multiple campaigns at the same time and want to transfer your participants from one campaign to another. Thanks to the settings for selecting data to keep, they won't have to fill in the fields already completed in the first form again. Only the uncompleted fields will need to be filled out in the new campaign's form. This optimizes the user experience and boosts engagement by making personal data collection easier.

⚠️ For data to be kept when redirecting to another campaign, the global JWT private key must have been generated on the account. Please contact your account manager to perform this operation.

Example

Once the first Prediction game is over, Orange Football Club redirects its participants to a second Prediction game featuring other matches.

4. Display a pop-in

If you want to limit the number of page views and maximize the participation rate for your campaign, you can choose a pop-in display. This format is ideal for displaying instructions when clicked by the participant or for providing more details about your prizes.

Click the button below to see our graphic recommendations for creating your pop-in:

Exemple

5. Anonymous Connection

All games collecting data (Photo Contest, Proof of Purchase, etc., with the exception of the Form) are only accessible if the participant is authenticated. Anonymous connection allows access to a module that collects data without requiring authentication. For example, on a Photo or Video Contest, a user can browse the gallery to view photos/videos without filling out the form. A redirect to the Form can be provided if the visitor wishes to vote or upload their own photo/video.

Example

Example of a "Vote" button with anonymous connection to access the gallery without being identified:

6. Logout

Configuring the "Logout" button allows you to reset the current session, for example to register again. This is particularly useful during a trade show or event when the game is displayed on a tablet or kiosk. If you want to automatically log out a player after a period of inactivity, you can check this article.

Example

Frequently Asked Questions:

Is it possible to create a button to choose the display language?

It is entirely possible to create a button to allow the user to choose their language on a multilingual campaign. Learn more.

How to delete a button?

Click on the button to delete in the preview. A trash can icon will appear, click on it to delete the button. If the icon does not appear, it means the button is mandatory and cannot be deleted because it is essential for the module or game mechanics to function.
​

How to duplicate a button?

Right-click on the button to duplicate and select "Copy". Then right-click in an empty area of the page where you want to add your button and choose "Paste".

  • If you copy your button to another page: the button will be pasted at the exact same spatial coordinates as on the original screen.
    ​

  • If you copy a button on the same original page: the element will be pasted with a 15px offset.

Did this answer your question?