HTML for Mobile (Responsive work around)

We get asked a lot on how can I make my email more responsive or look better. Well, it is all about knowing HTML.Easier said than done. So, some of our users are successful using MailChimp.You may export your customer list and use it directly or with the instructions below use it to help you with the HTML coding of your emails.Here are instructions for using the HTML from MailChimp within ServiceMonster:

Step 1: Create a Free MailChimp Account

  1. https://mailchimp.com
  2. Look for the signup button
  3. Fill out your information

Step 2: Create a Template in MailChimp

To create a template, follow these steps.

  1. Navigate to the Templates page.
  2. Click Create Template.
Cursor Click - Create Template
  1. Click one of the following tabs.
https://eep.io/images/yzco4xsimv0y/2lO0cFUpKkmOeKSK6oUsqC/f31ef0e70e795e12b4388bee013f646e/navigation-layouts-clicklayouts.png
  1. LayoutsThe Layouts tab contains Featured and Basic templates. Featured templates provide recommendations for the type of content to include in a campaign. Basic templates provide blank layouts you can add content to.

ThemesThe Themes tab contains predesigned layouts.Code your ownThe Code your own tab allows you to import or paste in HTML to create your template layout.

  1. Click the template you want to work with.
  2. Drag and drop content blocks into your template layout to add and format text, upload images, and link to files. When you're done, click Save and Exit.
  3. In the Save Template pop-up modal, type a name for your template.
https://eep.io/images/yzco4xsimv0y/3tFCMkNtK0Ayi8qYOcCSwe/d80180ba111ac5eda7afce021647a1bb/modal-savetemplate-clicksave.png
  1. Click Save.

Step 3 Export the HTML from your new Template

  1. Navigate to the Templates page.
  2. Locate the template you'd like to export by browsing the template list or using the search option.
  3. Click the drop-down menu next to the Edit button for the template you want to download and choose Export as HTML.
https://eep.io/images/yzco4xsimv0y/6vASN1yIo0Y8OMyqoG0Iuk/a3d00a0274ca7cd415246021752ded24/templates-exporthtml.png

If you're exporting a saved drag-and-drop template, a warning appears before the template can be exported.

https://eep.io/images/yzco4xsimv0y/1Ms6fBb2WEASI8WcMYmSGQ/67d26b70280272d9dd3d461485a04f9d/templates-exporthtml-popupwarning.png

Exported drag-and-drop templates will not include the drag-and-drop functionality in their code.After clicking the Got It, Export Template button, the template downloads to your computer as an HTML file. You'll now be able to edit the template outside of Mailchimp in your preferred HTML editor.

Step 4 Copy the HTML

  1. Find the file you just saved in your file directories
  2. Right Click the File
  3. Select Open with and then select Notepad
  4. Once open, click your cursor within the body and right click Select All
  5. Then go to the Edit Menu and select Copy.

Step 5: CSS Inliner Tool

  1. To clean up the HTML before importing into ServiceMonster use this tool: https://templates.mailchimp.com/resources/inline-css/
  2. Paste the HTML (Ctrl + P will paste it wherever your cursor sits)
  3. Click Convert
  4. New HTML code will be generated below the Convert button
  5. Copy the code (Highlight and then Ctrl +C will copy the code)

Step 6: Paste HTML into the ServiceMonster editor.

  1. Login to your account and go to the marketing materials section.
  2. Create a new or select one you are working on
  3. Click the Code View button
  1. Clear out all of the codings
  2. Paste in the new coding you just copied. (Ctrl + P will paste it wherever your cursor sits)

Step 7: Remove the MailChimp data tags

  1. In the html editor do a ctrl + f search for "*|" to get rid of MailChimp's merge tags. Y

Step 8: View the content and adjust

  1. Select the Code View button again and you will see the preview of your email, you may make edits directly here or go back to MailChimp to edit and re-export and paste again.

Don’t forget to save your work!