May 2nd, 2024

Add a marquee component to your emails

Last week, we launched our standard library of components. We've been working on components that will help email creators build quickly, and we thought this would be a fun one to share as a custom component!

Although this one is completely outside of the box and wouldn't make sense to use in emails most of the time, it's fun!

Check out this email example below that leverages a marquee component to create a scrolling text banner!

If you're curious to test this out in a campaign of your own, save the below as a custom component, and include it in your HTML in Parcel.

<script>
    export const config = {
      label: "scrolling",
      presets: [
        {
          label: 'Scrolling',
          content: '<scrolling text="Hello customer.io ~" direction="left" speed="0.5" />'
        }
      ]
    }

    export const props = Component.defineProps({
      text: {
        label: 'Text',
        schema: Component.props.string().default('Hello world'),
      },
      direction: {
        schema: Component.props.enum(['left', 'right']).default('left'),
        type: 'toggle'
      },
      speed: {
        schema: Component.props.enum(['0.5', '1', '2']).default('1'),
        type: 'toggle'
      } 
    })

    const text = `${props.text} `.repeat(100)

    const scrollamount = props.speed === '0.5' ? 3 : props.speed === '1' ? 6 : 12;
</script> 
<template>  
  <marquee #set:direction="props.direction" #set:scrollamount="scrollamount">
    ${text} 
  </marquee>
</template>