Set up transactional messages for Recharge

Before you can launch Recharge transactional message journeys, you'll first need to build a draft transactional journey and configure your Recharge site. 

Before you begin

• This guide assumes that you've already set up the Attentive and Recharge integration. If you haven't, check out the Recharge setup guide first. 
• If your CSM hasn't given you the Javascript code snippet to enable the Recharge checkbox yet, you won't be able to complete this setup process.

Create your first Recharge journey

Create your first transactional journey and turn it on or schedule it. Your CSM will need the information generated by your first journey to complete the setup process.

If you make any changes to the journey template, keep in mind that you’re responsible for ensuring that your transactional messages don’t include marketing content. See What are transactional journeys? for more information.

Add a checkbox to your Recharge checkout

Next, you'll need to add the opt-in checkbox to your Recharge account so your customers can opt-in to Recharge transactional messages.

Note that you'll need the Javascript code snippet provided by your CSM before you can complete this step.

1. Sign in to your myshopify.com account.
2. From the left sidebar, click Apps.
   
3. Click Recharge.
4. From the Recharge app, go to Storefront, then click Checkout.
   The Checkout Settings page opens.
5. Open the CSS Editor text box, and paste the following code in the CSS Editor section:
   

   /* Insert in custom CSS section in Recharge settings */
   
   .fieldset-description {
   margin-top: 16px;
   }
   .section__content.section__content__attentive {
   border-radius: 4px;
   background-color: #fafafa;
   border: solid 1px #e6e6e6;
   padding: 12px;
   }
   .section__content.section__content__attentive .input-checkbox {
   background: #fff;
   }
   .section__footer__attentive {
   font-size: 9px;
   font-weight: normal;
   font-style: normal;
   font-stretch: normal;
   line-height: 1.25;
   letter-spacing: normal;
   text-align: left;
   color: #808080;
   padding-top: 4px;
   }
   .section__footer__attentive a {
   color: #808080 !important;
   font-weight: bold;
   }
   .section__footer__attentive b {
   font-weight: bold;
   }
   .checkbox__input {
   padding-right: 0.75em;
   white-space: nowrap;
   }
   .checkbox__label.checkbox__label__attentive {
   cursor: auto;
   }
   .checkbox__label__attentive__header {
   font-size: 14px;
   font-weight: bold;
   font-style: normal;
   font-stretch: normal;
   line-height: 1;
   letter-spacing: normal;
   text-align: left;
   color: #333333;
   }
   .checkbox__label__attentive__subheader {
   font-size: 12px;
   font-weight: normal;
   font-style: normal;
   font-stretch: normal;
   line-height: 1.17;
   letter-spacing: normal;
   text-align: left;
   color: #737373;
   padding-top: 4px;
   }
   .checkbox-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   align-items: baseline;
   }

6. Below the CSS editor, make sure that the Enable Javascript on Page 1 of checkout is enabled.
   
   If it's not, reach out to your Recharge support contact to have it enabled.
7. In the text box below the Enable Javascript checkbox, paste the code provided by your CSM.
8. Scroll down to the Thank you page section, and copy the following code:
   

   <script type="text/javascript" src="https://cdn.attn.tv/[yourcompanyname]/dtag.js"></script>

9. Scroll to the bottom of the page and click Save.