Jak dodać stopkę do wiadomości mail wraz z grafiką – logo firmy?

Dziś chciałbym pokazać Wam w jaki sposób dodać stopkę do maila, która zawiera dodatkowo grafikę. Wydawałoby się, że jest to prosta czynność, aczkolwiek może przysporzyć nam ona nieco kłopotu. Problem w tym przypadku może stanowić grafika, którą chcemy załączyć do naszej wiadomości.


Wstawianie stopki z grafiką w programie pocztowym.

W przypadku kiedy korzystamy z programu pocztowego nie stanowi to żadnego problemu ponieważ grafikę, którą wstawiamy do wiadomości mamy na swoim dysku twardym i jest ona wysyłana razem z mailem do odbiorcy. Wystarczy podać kod taki jak poniżej w postaci HTML gdzie obrazki mogę być podane z lokalnego HDD lub z serwera.

Zadanie:

Dodać stopkę zawierającą:
– imię nazwisko,
– dane firmy,
– adres mailowy (po kliknięciu ma się uruchomić program pocztowy),
– adres strony internetowej (po kliknięciu ma się otwierać strona w nowym oknie),
– logo firmy w postaci grafiki (po kliknięciu otworzy się strona firmowa).

Wstawianie stopki z grafiką za pomocą kodu HTML w wiadomości mail, gdy korzystamy poprzez www.

Logujemy się na swoje konto poprzez przeglądarkę www. Miejsce, w którym możemy wstawić stopkę, sygnaturę. W moim przypadku w Ustawieniach.

Dodawanie stopki w wiadomości mail wraz z grafiką.
Dodawanie stopki w wiadomości mail wraz z grafiką.

 

Problem zaczyna się, gdy korzystamy z poczty poprzez stronę www, wtedy możemy nie mieć możliwości dołączenia do stopki grafiki, a jedynie tekst lub kod html.

[wp_ad_camp_1]

W takim przypadku, aby dołączyć obraz do naszej stopki w wiadomości musimy użyć kodu html oraz posiadać serwer, na którym możemy przechowywać pliki graficzne, do których będziemy się odwoływać w html-u.

<!--Wystarczy podmienić dane na swoje.-->
<!--Tworzymy kontener na zwrot z szacunkiem oraz Podpis z telefonem-->
<div>
	Z poważaniem<br/>
	<strong>[Imię Nazwisko]</strong><br/>
	tel.: [+48 123 123 000]<br/>
</div>
<!--oddzielamy podpis linią poziomą-->
<div><hr/></div>
<!--nowy kontener na obrazek z linkiem a także na dane firmy tj. nazwę, adres oraz e-mail->
<div>
	<!--podajemy gdzie będzie linkować obrazek oraz, że ma się otworzyć w nowym oknie-->
	<a href="https://wicket.eu" target="_blank">
	<!--podajemy adres naszego obrazka na serwerze oraz opis-->
	<img src="https://wicket.eu/wp-content/uploads/2015/09/g-.png" alt="G+" /></a>
	[Nazwa firmy]<br/>
	[Adres firmy]<br/>
	tel.: [+48 987 123 000]<br/>	
	<!--Podajemy adres mailowy w postaci łącza na który będzie można posłać wiadomość-->
	e-mail: <a href="mailto:[adres@mail.com]">[adres@mail.com]</a><br/>
	<!--Podajemy adres strony w postaci linka-->
	www: <a href="http://www.wicket.eu" target="_blank">[wicket.eu]</a><br/>
</div>

i otrzymamy:

Z poważaniem
[Imię Nazwisko]
tel.: [+48 123 123 000]


G+
[Nazwa firmy]
[Adres firmy]
tel.: [+48 987 123 000]
e-mail: [adres@mail.com]
www: [wicket.eu]

Dodawanie stopki w wiadomości gdy nie mamy serwera, na którym przechowujemy pliki.

Istnieje jeszcze jedno rozwiązanie, którego możemy użyć jeśli nie posiadamy serwera, na którym możemy trzymać pliki graficzne. Mam tu na myśli zakodowanie obrazków w algorytmie Base64 i dołączenie otrzymanego kodu do stopki napisanej w HTML. Wadą tego rozwiązania jest to, że nie zawsze taka stopka może zostać zdekodowana przez odbiorcę np. jeśli odbiorca korzysta z poczty poprzez www i używa np. IE6 lub IE7.

Pliki grafiki możemy zakodować na stronie http://www.base64-image.de wchodzimy i podajemy plik a po chwili otrzymamy kod do wklejenia do naszej stopki.

<pre class="lang:HTML" title="Stopka w HTML">
<!--Wystarczy podmienić dane na swoje.-->
<!--Tworzymy kontener na zwrot z szacunkiem oraz Podpis z telefonem-->
<div>
	Z poważaniem<br/>
	<strong>[Imię Nazwisko]</strong><br/>
	tel.: [+48 123 123 000]<br/>
</div>
<!--oddzielamy podpis linią poziomą-->
<hr/>
<!--nowy kontener na obrazek z linkiem a także na dane firmy tj. nazwę, adres oraz e-mail->
<div>
	<!--podajemy gdzie będzie linkować obrazek oraz, że ma się otworzyć w nowym oknie-->
	<a href="https://wicket.eu" target="_blank">
	<!--podajemy adres naszego obrazka na serwerze oraz opis-->
	
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAMAAADU1xmCAAAAkFBMVEX////dSznaMxjcQCrutK/cRzTdSTbcRDDcRjLdTDrusKv++fncQy/eUUDbPijZJQD32NT87uzgXEz539z65+Tuq6T1zcjiaVzxwLvkdWjwurXojoT65ePYEAD99fT0xsHlf3Xsn5ftpp7hZFTql43oiX7gWEflem7jb2LplIrjcWbpjYHaLxDiZ1jsoZr308+Aw6KLAAADGUlEQVRYhe2X25KjIBCGRQLiifFsNG6iJmqcncT3f7sFMpP1VBNld6v2wv/KEPzq76ZpUFE2bdq06V/IDMrG06j61MeHdnHlWO4+VqGuIwK4dF0HuD74ksaihoKq3O3ujY457VaE5V6SpRg19EIRVXCvGQ57O1kUg1nIDj+fzZKHim1pZycba9XvfCc8d8g7ysGCdwL0sPdb5e6sVo52JyxPUW9AmANUCuYzayjuF4NDBe0kQ9vrYEQz+bICq5ChGRZbwrPTpx00RtMqCdix4DRvENaeh6rlEjS35UZ0oz/mQ077KePtYvFXL/2xTOStlKCJvAF06ycu45uVOoNpP9Q3Q3ktvqYM15/KvWF9OE0FcMne9UWxkiTrDbG8wZGThTQlFOZIaD5HUgis3BzOWkpzG24O18+uYd6Q9T7ulEtpSuAhnrk6/fzdEuvqjCctpikZ1Vjekd7yttQlxEqmPZzR0umbszrmNiYIQRXZkBJ07a0IKw0h5h6KhyWF4lzy9/h8E/vdHpgQ3a6nhQG7fhddEW8Bg+E3KMSXXTyoS4pYKBCFPKQZOy5WNKRK+ZOx+Fz0qThh5vrkilX4UmaJAyue1MeaCnkquCER6637GzQlwmLdCJlEtZpmuq7TCHMAw53kPhUKnG5fVsnVQ/gTN2qWb8tLIzJyz1JVrT7Hcf24JgE6tGIsLY3o4lkQnttT5/i+71T04W62UF7JvZ8J0prI/bp4HEsqokXN+rtgkGOMyTAlERYdz15dEm7Cu/Y4Jj9GUqd9SWdPTp9vf61aeesK+NFMZvKTst5EmmAdrYB8W5rTP46sjEmTTf/4Trw7kmaGprTMW75yUXlpzdOK8XVigXibxt48DYNwZvw7iX5G57ZMhdB15SIoV3H/Pk/NsYrDa60pJyiOoWKcbrPFcHx3eC3zIHBo9El1LGsrXhsnU5aI1KFr2ONFB5smM2fDa/nNw50eV0Xa+X6XFqzX0XZl4X7peIEWxgAjhG27rm0dQepJfSs8FBw8m9EI0TSCgO3l0et3vlVUtlWV53l1Cf8UtWnTpv9LvwCBRy3ZEtY1IwAAAABJRU5ErkJggg=="/>

</a>
	[Nazwa firmy]<br/>
	[Adres firmy]<br/>
	tel.: [+48 987 123 000]<br/>	
	<!--Podajemy adres mailowy w postaci łącza na który będzie można posłać wiadomość-->
	e-mail: <a href="mailto:[adres@mail.com]">[adres@mail.com]</a>
	<!--Podajemy adres strony w postaci linka-->
	www: <a href="http://www.wicket.eu" target="_blank">[wicket.eu]</a><br/>
</div></pre>

Otrzymamy identyczną stopkę:

Z poważaniem
[Imię Nazwisko]
tel.: [+48 123 123 000]


[Nazwa firmy]
[Adres firmy]
tel.: [+48 987 123 000]
e-mail: [adres@mail.com]
www: [wicket.eu]


Skoro dotarłeś(aś) do końca wpisu poświęcając swój czas chciałem Ci podziękować i prosić o małą przysługę mianowicie o udostępnienie tego wpisu na swoim profilu społecznościowym, polubienie lub wpisanie komentarza. Widząc odzew, motywuje mnie to do dalszego pisania. Wiem wtedy, że praca i czas który poświęcam nie idzie na darmo.

7 myśli na temat “Jak dodać stopkę do wiadomości mail wraz z grafiką – logo firmy?

  • 2018-05-21 o 09:33
    Permalink

    Naprawdę czytelnie przedstawione działanie krok po kroku

    Odpowiedz
  • 2018-12-22 o 19:06
    Permalink

    niewiem dlaczego ale jak zalaczam sygnature to wyswietla mi sie caly kod w przeslanej na inne konto pocztowe wiadomosci a nie juz w ladnej formie zrobionej stopki. Mam konto na o2.pl. Jakies sugestie? A dodam robilem w tym base 64, pozdrawiam

    Odpowiedz
    • 2018-12-22 o 19:41
      Permalink

      Witaj @Ziober

      Przypuszczam, że możesz mieć gdzieś błąd w kodzie. Serwer mailowy o2 prawidłowo otwiera stopkę zawierającą Base64 sprawdzałem przez klienta webowego. Więc raczej odpada problem braku interpretacji przez serwer.

      Odpowiedz
  • 2019-07-24 o 16:27
    Permalink

    A jak zrobić 2 kolumny w stopce ? Też na Divach operować ? Czy lepsza będzie tabelka?

    Odpowiedz
    • 2019-07-24 o 17:03
      Permalink

      Osobiście na dzień dzisiejszy opieram się na rozwiązaniu z tabelą. Szybciej, prościej, mniejsze problemy z wyświetlaniem stopki u odbiorcy. Swego czasu bawiłem się responsywnymi szablonami opartymi mi. Bootstrap fajna sprawa polecam jak ktoś ma chęci.

      Odpowiedz
  • Pingback: Microsoft Outlook - dodawanie stopki, podpisu w wiadomości. - wicket - porady IT

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

thirteen + fourteen =