Confetti in Admit Decision Letters
  • 01 Apr 2024
  • 1 minute read
  • Dark
    Light
  • PDF

Confetti in Admit Decision Letters

  • Dark
    Light
  • PDF

Article Summary

Decision letters within Slate support the full capabilities of modern browsers.  To add some pizzazz to your decision letters and take advantage of the "online" in "online decisions," we encourage our partner colleges and universities to embed images, videos, and other interactive elements.

Confetti Colors

Embedding Confetti: To embed confetti that will fall when the student views his or her admit letter, click the "Source" button on your decision letter and add the following HTML code to the source code of the letter:

<script src="/fw/framework/base/confetti.js"></script>
<script>confetti({ timeout: 15 });</script>

This will produce colorful confetti that will fall for 15 seconds. You can change the value of the timeout parameter or omit it entirely to keep the confetti falling.

If you would like to customize the colors of the confetti, you can modify the script above to the following:

<script src="/fw/framework/base/confetti.js"></script>
<script>confetti({ colors: [ [ 'blue', 'darkblue' ], 
[ 'red', 'darkred' ] ], timeout: 15 });</script>

This code takes an array of color combinations that will be used for the strands (the [ 'blue', 'darkblue' ] array is one), where the first parameter defines the color for the first side of the confetti and the second parameter defines the color for the second side.  HTML color names can be used along with RGB hex colors, such as #0000ff for blue and #ff0000 for red.  For example, to show only blue confetti, use:

<script src="/fw/framework/base/confetti.js"></script>
<script>confetti({ colors: [ [ '#0000ff', '#000080' ] ], 
timeout: 15 });</script>

You can use an HTML color picker to help select your school colors for the confetti.

Confetti Images

If you would like to use a custom image in place of the colorized confetti, you can use the following script instead, replacing the URL of the image as appropriate.

<script src="https://technolutions-com.cdn.technolutions.net/slate/reader/snowfall.jquery.js" 
type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $(document.body).snowfall({
      image: "https://technolutions-com.cdn.technolutions.net/slate/reader/shamrocks.png",
      minSize: 16,
      maxSize: 64,
      maxSpeed: 3,
      flakeIndex: 999999,
      flakeCount: 15
    });
    setTimeout(function(){ $(document.body).snowfall('clear'); }, 15000);
  });
</script>


Was this article helpful?