1. Використовуємо тег підстановки відео в розсилці MailChimp
2. Вставляємо тег через блоковий редактор MailChimp
3. Вставляємо тег в код письма
4. висновок

Сьогодні ми покажемо, як красиво вставити відео в лист в сервісі MailChimp. Мова піде про маловідомий способі, який вбудований в саму платформу. Вам не доведеться викручуватися в фотошопі і придумувати кнопку «Play» - MailChimp сам поставить превью і симпатично його оформить.

Ось так виглядає відео, залите таким способом:

Використовуємо тег підстановки відео в розсилці MailChimp

Щоб вставити відео, ми будемо використовувати системний тег. Він підставляє ролики з YouTube, Vimeo, BLIPTV, WISTIA і VZAAR. Тобто він не підійде, якщо ваші відео залиті на який-небудь Rutube.

Якщо ви забули, що таке мерджтегі, можете прочитати про них в нашій статті про сегменти і групи.

Тег виглядає ось так: * | YOUTUBE: [$ vid = 3EHgWDuy6BI, $ max_width = 500, $ title = Y, $ border = Y, $ ratings = y, $ views = y] | * Скопіюйте його в лист, і MailChimp зробить превью з кнопкою «Play», таймлайн і кількістю переглядів. Тег працює як в верстці, так і в блочному редакторі.

Разбёремся, що означає кожен з елементів.

• YOUTUBE - в цій частині пишемо, який відеохостинг використовуємо. Якщо це Vimeo, то пишемо VIMEO.
• vid = 3EHgWDuy6BI - код відео, який можна знайти в кінці адресного рядка. На YouTube він виглядає ось так:
  
• На Vimeo код складається з цифр:
  
• Ще один спосіб - натиснути кнопку «Поділитися» ( «Share») і скопіювати код з отриманої посилання. Він буде той же, що і в адресному рядку.
  
• max_width = 500 - максимальна ширина вікна в пікселях.
• title = Y - заголовок. Він автоматично підтягнеться з каналу, на який залито ваше відео. Якщо після «=» поставити N, заголовка не буде. Ось так виглядає відео з заголовком:
  
• $ Border = Y - чорна межа у превью. Якщо замініть Y на N, рамки не буде.
  
• $ Ratings = y - рейтинг відео, але така функція є тільки на Vimeo. Рейтинг показує, скільки зірок набрало відео. Якщо використовуєте відео з YouTube і проставите тут Y, нічого страшного не станеться - рейтинг просто не відобразиться. Приклад з роликом Vimeo:
  
• $ Views = y - кількість переглядів у ролика. Тут зворотна ситуація - функція працює тільки на YouTube, на Vimeo її немає.
  

Раніше використовувався тег $ trim_border = Y - він обрізав зайве простір по краях в превью. Мабуть, YouTube щось у себе підкрутив, і тепер цей тег не має сенсу. Що з ним, що без нього - різниці немає.

Вставляємо тег через блоковий редактор MailChimp

Якщо ви збираєте лист з блоків в редакторі MailChimp, виберіть блок «Code» і вставте ваш тег.

Перевірити, чи правильно він підставився, можна на екрані попереднього перегляду. Якщо все вірно, ви побачите превью вашого відео.

Вставляємо тег в код письма

Якщо ви володієте базовими знаннями html, можна прописати тег в коді листи. Для цього просто скопіюйте його в верстку, обертати в <a> <a> не потрібно.

Щоб додати відступи або розмістити відео з краю або по центру, помістіть тег в таблицю. Відступи прописуються в параметрах таблиці через атрибут «cellpadding». За розташування превью щодо центру відповідає атрибут «align».

Розташування по центру:

<Table cellpadding = "0" cellspacing = "0" border = "0" width = "0" style = "widht: 100%! Impotant; min-width: 100%; max width: 100%;" > <Tr> <td height = "70" align = "right"> </ td> </ tr> <tr> <td align = "center" valign = "top"> * | YOUTUBE: [$ vid = 3EHgWDuy6BI , $ max_width = 500, $ title = Y, $ border = Y, $ trim_border = Y, $ ratings = y, $ views = y] | * </ td> </ tr> <tr> <td height = "70 "align =" right "> </ td> </ tr> </ table>

Розташування по лівому краю:

<Table cellpadding = "0" cellspacing = "0" border = "0" width = "0" style = "widht: 100%! Impotant; min-width: 100%; max width: 100%;" > <Tr> <td height = "70" align = "right"> </ td> </ tr> <tr> <td align = "left" valign = "top"> * | YOUTUBE: [$ vid = 3EHgWDuy6BI , $ max_width = 500, $ title = Y, $ border = Y, $ trim_border = Y, $ ratings = y, $ views = y] | * </ td> </ tr> <tr> <td height = "70 "align =" right "> </ td> </ tr> </ table>

Розташування по правому краю:

<Table cellpadding = "0" cellspacing = "0" border = "0" width = "0" style = "widht: 100%! Impotant; min-width: 100%; max width: 100%;" > <Tr> <td height = "70" align = "right"> </ td> </ tr> <tr> <td align = "right" valign = "top"> * | YOUTUBE: [$ vid = 3EHgWDuy6BI , $ max_width = 500, $ title = Y, $ border = Y, $ trim_border = Y, $ ratings = y, $ views = y] | * </ td> </ tr> <tr> <td height = "70 "align =" right "> </ td> </ tr> </ table>

При бажанні можна вставити тег в складну таблицю або зробити сітку з кількох відео. Але для цього потрібні базові знання табличній верстки.

висновок

Подібна підстановка відео в лист - цікава, але маловідома можливість MailChimp. Головний її плюс в тому, що ви робите симпатичні превью, не підключаючи дизайнера. Спасибі розробникам MailChimp, що так подбали про нас.