Customizing the Media Chooser Uploader Button

Overview

When you embed the Media Chooser script on a webpage, it comes with a standard green button with the "Add Photos" text on it (see image below). You may want to customize the size, color, and text of the button.

Button.png

This image is the standard Media Chooser upload button.


This article provides instructions for customizing the standard Media Chooser upload button to your preferred design or branding palette.

 


 

Information

Customers typically use the Media Chooser tool for contests and sweepstakes, where they ask users to upload media by embedding the Media Chooser tool on their website pages. 

 


 

Process

 Follow these steps to customize the Media Chooser Uploader Button:

  1. Define and style a custom button and assign an ID, using the following code:
<button id="BUTTON-ID-HERE" style="border: 1px solid #077ec3; border-radius: 4px; font-size: 14px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); padding: 5px 20px; cursor: pointer; background-color: #7fa950; background: -webkit-linear-gradient(#7fa950, #5f8d2b); background: -o-linear-gradient(#7fa950, #5f8d2b); background: linear-gradient(#7fa950, #5f8d2b);">Share your travel moments!
</button>


The code above creates the following button: 

 

Note:
You can replace "BUTTON-ID-HERE" with an ID of your choice.

You can customize the button by changing elements of the code above, for example, the thickness of the border (e.g.border: 1px), font size (e.g., font-size: 14px) and color (e.g.background-color: #7fa950).

The values beginning with #(e.g., #077ec3; #fff) refer to the color, for example, of the button, button border, and font. You can vary the colors according to your preference by including the html color code of your choice.

 

  1. Grab the embed code for the Media Chooser you want to embed on the page. At the end of the script tag, include the parameter data-chooser-selector="#BUTTON-ID-HERE".

 

<script src="https://support.ignitetech.com/hc/article_attachments/360012666714/chute.chooser.js"></script><script src="https://support.ignitetech.com/hc/article_attachments/360012666734/chute.chooser.embed.js" id="chute-chooser-script" data-store-id="media-chooser-aQGOdswh" data-client-id="4f0b30a938ecef2020000003" data-campaign-id="3452" data-chooser-selector="#BUTTON-ID-HERE">
</script>

 

NOTE: To get the embed code of the Media Chooser, follow the steps for embedding the Media Chooser on a webpage.

 

The image below shows a sample customized Media Chooser uploader button:

 sample_customize_media_chooser_button.JPG

 

Back to top

 

Comments

0 comments

Please sign in to leave a comment.