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 and submit your first ReCharge journey for approval

Before you can finish configuring the ReCharge integration, create your first transactional journey and submit it for approval. Your CSM will need the information generated by your first journey to complete the set up process.
Note: If you use the templated copy, your journey can be activated immediately.

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, click Explore ReCharge in the upper right corner.
   
5. From the navigation bar, click the Wrench icon, and then select Checkout.
   
   The Checkout Settings page opens.
6. 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;
   }

7. 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.
8. In the text box below the Enable Javascript checkbox, paste the code provided by your CSM.
9. 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>

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