# Add Your Social Link (Icon)

If you want to add a link to your **social accounts** so that a social icon is displayed in the footer, and in the mobile menu of your website, follow this:

#### You can add the following social icons:

* Dribbble
* Behance
* Reddit
* Instagram
* GitHub
* LinkedIn
* Telegram

## **To customize:**

* Go to **Settings > Code injection** from the admin menu&#x20;
*   Choose **Site footer**&#x20;

    <figure><img src="https://570087162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwvffoSogkWPRht0dQCRD%2Fuploads%2FoqrsCHnglV22rujAwIMR%2Fcode%20injection.png?alt=media&#x26;token=6491f07f-f7cc-4e05-a3a3-7ebc40470fbb" alt=""><figcaption><p>Code injection</p></figcaption></figure>
* Below is the code needed to add a specific icon:

**Dribbble icon**

```html
<script>
const dribbbleLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const socialsContainers = document.querySelectorAll(".socials");

const socialLinkHTML = `<a class="socials__link" href="${dribbbleLink}" target="_blank" rel="noopener noreferrer" aria-label="My Dribbble Link">
<div class="socials__icon-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 18.75C5.17656 18.75 1.25 14.8234 1.25 10C1.25 5.17656 5.17656 1.25 10 1.25C14.8234 1.25 18.75 5.17656 18.75 10C18.75 14.8234 14.8234 18.75 10 18.75ZM17.3792 11.1973C17.124 11.1171 15.0677 10.5024 12.7242 10.8779C13.7013 13.5642 14.1001 15.7517 14.1767 16.2067C15.0243 15.6345 15.7459 14.8949 16.297 14.0334C16.8482 13.1719 17.2172 12.2067 17.3814 11.1973H17.3792ZM12.9203 16.8906C12.8088 16.2344 12.3734 13.9506 11.3234 11.225L11.2753 11.2396C7.05344 12.7089 5.54406 15.6328 5.41281 15.9063C6.72107 16.9325 8.33653 17.4888 9.99927 17.4856C11.0347 17.4856 12.0191 17.2742 12.9159 16.8921L12.9203 16.8906ZM4.4474 15.0094C4.61656 14.7177 6.66771 11.3234 10.5228 10.0766C10.621 10.044 10.7194 10.0148 10.8181 9.98906C10.6276 9.56177 10.4253 9.13885 10.2115 8.72031C6.47813 9.83594 2.85854 9.78854 2.53042 9.78125L2.5275 10.0087C2.5275 11.9286 3.25521 13.6816 4.44813 15.0072L4.4474 15.0094ZM2.68281 8.47969C3.01823 8.48552 6.0975 8.49865 9.59313 7.56969C8.74709 6.08058 7.82216 4.63769 6.82229 3.24719C5.77579 3.74018 4.85758 4.46869 4.13957 5.3757C3.42155 6.28271 2.9232 7.3436 2.68354 8.47531L2.68281 8.47969ZM8.25 2.74625C8.45563 3.02333 9.81406 4.87104 11.0369 7.12125C13.6947 6.12594 14.8212 4.61292 14.9547 4.42188C13.5908 3.20608 11.8271 2.53487 10 2.53625C9.39844 2.53625 8.81146 2.60917 8.25 2.74406V2.74625ZM15.7859 5.28594C15.627 5.4974 14.375 7.10375 11.6122 8.23177C11.7872 8.58906 11.9549 8.95 12.108 9.31531C12.1664 9.44656 12.2174 9.57781 12.2684 9.70177C14.7549 9.38823 17.2268 9.89135 17.4747 9.9424C17.4601 8.17781 16.833 6.55906 15.7903 5.29031L15.7859 5.28594Z" fill="#261651"/>
</svg>
</div>
</a>`

  if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
} 
</script>
```

**Behance icon**

<pre class="language-html"><code class="lang-html">&#x3C;script>
const behanceLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const socialsContainers = document.querySelectorAll(".socials");

const socialLinkHTML = `&#x3C;a class="socials__link" href="${behanceLink}" target="_blank" rel="noopener noreferrer" aria-label="My Behance Link">
&#x3C;div class="socials__icon-wrapper">
<strong>&#x3C;svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
</strong>&#x3C;path fill-rule="evenodd" clip-rule="evenodd" d="M8.48917 9.46828C8.93941 9.26827 9.32641 8.94899 9.60833 8.54495C9.87352 8.10574 10.0042 7.59845 9.98417 7.08578C10.0016 6.61711 9.9151 6.15039 9.73083 5.71911C9.57992 5.35192 9.33224 5.03252 9.01417 4.79495C8.68083 4.55328 8.30167 4.38911 7.90333 4.31495C7.43287 4.21044 6.9519 4.16066 6.47 4.16661H1.5C1.4337 4.16661 1.37011 4.19295 1.32322 4.23984C1.27634 4.28672 1.25 4.35031 1.25 4.41661V15.5341C1.25 15.6004 1.27634 15.664 1.32322 15.7109C1.37011 15.7578 1.4337 15.7841 1.5 15.7841H6.58333C7.07 15.7841 7.555 15.7191 8.025 15.5899C8.47459 15.4667 8.8983 15.2634 9.27583 14.9899C9.64866 14.7154 9.94899 14.3541 10.1508 13.9374C10.3788 13.4625 10.4897 12.9399 10.4742 12.4133C10.4915 11.7622 10.318 11.1203 9.975 10.5666C9.61884 10.0231 9.07363 9.63113 8.445 9.46661L8.48917 9.46828ZM3.79167 6.04161C3.74746 6.04161 3.70507 6.05917 3.67382 6.09043C3.64256 6.12169 3.625 6.16408 3.625 6.20828V8.79162C3.625 8.88328 3.7 8.95828 3.79167 8.95828H6.125C6.51177 8.95828 6.88271 8.80464 7.1562 8.53115C7.42969 8.25766 7.58333 7.88672 7.58333 7.49995C7.58333 7.11317 7.42969 6.74224 7.1562 6.46875C6.88271 6.19526 6.51177 6.04161 6.125 6.04161H3.79167ZM3.625 10.5833C3.625 10.4916 3.7 10.4166 3.79167 10.4166H6.22917C6.69882 10.4166 7.14924 10.6032 7.48133 10.9353C7.81343 11.2674 8 11.7178 8 12.1874C8 12.6571 7.81343 13.1075 7.48133 13.4396C7.14924 13.7717 6.69882 13.9583 6.22917 13.9583H3.79167C3.74746 13.9583 3.70507 13.9407 3.67382 13.9095C3.64256 13.8782 3.625 13.8358 3.625 13.7916V10.5833Z" fill="#261651"/>
&#x3C;path d="M12.8658 4.75828H16.8017C16.8674 4.75828 16.9305 4.78416 16.9773 4.83032C17.0241 4.87649 17.0508 4.93922 17.0517 5.00495L17.0625 5.80661C17.0629 5.83972 17.0568 5.87259 17.0444 5.90331C17.0321 5.93403 17.0137 5.96198 16.9905 5.98555C16.9672 6.00912 16.9395 6.02783 16.9089 6.0406C16.8784 6.05338 16.8456 6.05995 16.8125 6.05995H12.8658C12.7995 6.05995 12.7359 6.03361 12.6891 5.98672C12.6422 5.93984 12.6158 5.87625 12.6158 5.80995V5.00828C12.6158 4.94198 12.6422 4.87839 12.6891 4.8315C12.7359 4.78462 12.7995 4.75828 12.8658 4.75828Z" fill="#261651"/>
&#x3C;path fill-rule="evenodd" clip-rule="evenodd" d="M14.9767 14.0583C15.3823 14.0703 15.7808 13.9504 16.1125 13.7166C16.3292 13.5724 16.5017 13.3666 16.6108 13.1233C16.6245 13.0916 16.647 13.0645 16.6757 13.0453C16.7044 13.026 16.738 13.0155 16.7725 13.0149H18.3733C18.4817 13.0149 18.5617 13.1166 18.5292 13.2199C18.292 14.0026 17.8137 14.6903 17.1625 15.1849C16.4771 15.631 15.6715 15.8564 14.8542 15.8308C14.2733 15.8412 13.6963 15.7346 13.1575 15.5174C12.6675 15.3105 12.2311 14.9944 11.8817 14.5933C11.536 14.1767 11.2745 13.697 11.1117 13.1808C10.9175 12.6038 10.8231 11.9979 10.8325 11.3891C10.8268 10.7889 10.9244 10.1921 11.1208 9.62495C11.301 9.10642 11.5832 8.62925 11.9508 8.22161C12.3125 7.82975 12.75 7.51535 13.2367 7.29745C13.7601 7.0682 14.326 6.95178 14.8975 6.95578C15.5062 6.94674 16.1074 7.08997 16.6467 7.37245C17.1401 7.64543 17.5647 8.02733 17.8883 8.48911C18.2142 8.97078 18.4517 9.51245 18.5875 10.0866C18.7278 10.6918 18.7777 11.3143 18.7358 11.9341H12.9483C12.9207 12.5243 13.1138 13.1036 13.49 13.5591C13.6917 13.7458 13.9283 13.8866 14.1842 13.9724C14.44 14.0583 14.71 14.0874 14.9767 14.0583ZM13 10.3324C12.9999 10.3435 13.002 10.3545 13.0062 10.3648C13.0104 10.3751 13.0166 10.3844 13.0244 10.3922C13.0322 10.4 13.0416 10.4062 13.0518 10.4104C13.0621 10.4146 13.0731 10.4167 13.0842 10.4166H16.4575C16.4798 10.4166 16.5012 10.4077 16.517 10.392C16.5328 10.3762 16.5417 10.3548 16.5417 10.3324C16.5417 9.88512 16.364 9.45611 16.0477 9.13979C15.7313 8.82348 15.3023 8.64578 14.855 8.64578H14.6867C14.2393 8.64578 13.8103 8.82348 13.494 9.13979C13.1777 9.45611 13 9.88512 13 10.3324Z" fill="#261651"/>
&#x3C;/svg>
&#x3C;/div>
&#x3C;/a>`

  if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
} 
&#x3C;/script>
</code></pre>

**Reddit icon**

```html
<script>
const redditLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const socialsContainers = document.querySelectorAll(".socials");

const socialLinkHTML = `<a class="socials__link" href="${redditLink}" target="_blank" rel="noopener noreferrer" aria-label="My Reddit Link">
<div class="socials__icon-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0013 18.3327C5.39893 18.3327 1.66797 14.6017 1.66797 9.99935C1.66797 5.39697 5.39893 1.66602 10.0013 1.66602C14.6037 1.66602 18.3347 5.39697 18.3347 9.99935C18.3347 14.6017 14.6037 18.3327 10.0013 18.3327ZM15.5597 9.99935C15.5422 9.52018 15.2448 9.09602 14.8003 8.91602C14.3559 8.7361 13.8472 8.83402 13.5013 9.16602C12.5533 8.5216 11.439 8.1656 10.293 8.14102L10.8347 5.54102L12.618 5.91602C12.6617 6.32311 12.9948 6.63807 13.4037 6.65912C13.8126 6.68015 14.1762 6.40102 14.2616 6.00057C14.3469 5.60013 14.1287 5.19701 13.7467 5.04951C13.3648 4.902 12.9322 5.05382 12.7263 5.40768L10.6847 4.99935C10.6172 4.98455 10.5467 4.99737 10.4887 5.03495C10.4307 5.07252 10.3903 5.13173 10.3763 5.19935L9.75965 8.09102C8.59957 8.10851 7.46986 8.46477 6.50964 9.11602C6.15859 8.78568 5.64564 8.69377 5.20174 8.88168C4.75784 9.06952 4.46669 9.50168 4.45938 9.98368C4.45207 10.4656 4.72997 10.9064 5.16797 11.1077C5.15859 11.2298 5.15859 11.3523 5.16797 11.4743C5.16797 13.341 7.34297 14.8577 10.0263 14.8577C12.7097 14.8577 14.8847 13.341 14.8847 11.4743C14.894 11.3523 14.894 11.2298 14.8847 11.1077C15.3043 10.8991 15.5669 10.4679 15.5597 9.99935ZM7.2263 10.8327C7.2263 10.3724 7.59939 9.99935 8.05964 9.99935C8.5199 9.99935 8.89298 10.3724 8.89298 10.8327C8.89298 11.2929 8.5199 11.666 8.05964 11.666C7.83862 11.666 7.62666 11.5782 7.47038 11.4219C7.31409 11.2657 7.2263 11.0537 7.2263 10.8327ZM12.068 13.1243C11.4767 13.5699 10.7493 13.7967 10.0097 13.766C9.26999 13.7967 8.54257 13.5699 7.9513 13.1243C7.87789 13.0349 7.88429 12.9043 7.96613 12.8225C8.04795 12.7407 8.17851 12.7343 8.26797 12.8077C8.76899 13.1752 9.38057 13.3604 10.0013 13.3327C10.6228 13.3665 11.2372 13.1872 11.743 12.8243C11.8025 12.7663 11.8885 12.7444 11.9686 12.7669C12.0486 12.7895 12.1106 12.853 12.1311 12.9336C12.1516 13.0142 12.1275 13.0996 12.068 13.1577V13.1243ZM11.918 11.6993C11.4577 11.6993 11.0847 11.3263 11.0847 10.866C11.0847 10.4058 11.4577 10.0327 11.918 10.0327C12.3782 10.0327 12.7513 10.4058 12.7513 10.866C12.7605 11.0942 12.6756 11.3162 12.5165 11.4799C12.3573 11.6438 12.138 11.7352 11.9097 11.7327L11.918 11.6993Z" fill="#261651"/>
</svg>
</div>
</a>`

  if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
} 
</script>
```

**Instagram icon**

```html
<script>
const instagramLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const socialsContainers = document.querySelectorAll(".socials");

const socialLinkHTML = `<a class="socials__link" href="${instagramLink}" target="_blank" rel="noopener noreferrer" aria-label="My Instagram Link">
<div class="socials__icon-wrapper">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C14.717 2 15.056 2.01 16.122 2.06C17.187 2.11 17.912 2.277 18.55 2.525C19.21 2.779 19.766 3.123 20.322 3.678C20.8305 4.1779 21.224 4.78259 21.475 5.45C21.722 6.087 21.89 6.813 21.94 7.878C21.987 8.944 22 9.283 22 12C22 14.717 21.99 15.056 21.94 16.122C21.89 17.187 21.722 17.912 21.475 18.55C21.2247 19.2178 20.8311 19.8226 20.322 20.322C19.822 20.8303 19.2173 21.2238 18.55 21.475C17.913 21.722 17.187 21.89 16.122 21.94C15.056 21.987 14.717 22 12 22C9.283 22 8.944 21.99 7.878 21.94C6.813 21.89 6.088 21.722 5.45 21.475C4.78233 21.2245 4.17753 20.8309 3.678 20.322C3.16941 19.8222 2.77593 19.2175 2.525 18.55C2.277 17.913 2.11 17.187 2.06 16.122C2.013 15.056 2 14.717 2 12C2 9.283 2.01 8.944 2.06 7.878C2.11 6.812 2.277 6.088 2.525 5.45C2.77524 4.78218 3.1688 4.17732 3.678 3.678C4.17767 3.16923 4.78243 2.77573 5.45 2.525C6.088 2.277 6.812 2.11 7.878 2.06C8.944 2.013 9.283 2 12 2ZM12 7C10.6739 7 9.40215 7.52678 8.46447 8.46447C7.52678 9.40215 7 10.6739 7 12C7 13.3261 7.52678 14.5979 8.46447 15.5355C9.40215 16.4732 10.6739 17 12 17C13.3261 17 14.5979 16.4732 15.5355 15.5355C16.4732 14.5979 17 13.3261 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52678 13.3261 7 12 7ZM18.5 6.75C18.5 6.41848 18.3683 6.10054 18.1339 5.86612C17.8995 5.6317 17.5815 5.5 17.25 5.5C16.9185 5.5 16.6005 5.6317 16.3661 5.86612C16.1317 6.10054 16 6.41848 16 6.75C16 7.08152 16.1317 7.39946 16.3661 7.63388C16.6005 7.8683 16.9185 8 17.25 8C17.5815 8 17.8995 7.8683 18.1339 7.63388C18.3683 7.39946 18.5 7.08152 18.5 6.75ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9Z" fill="#212121"/>
</svg>
</div>
</a>`

  if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
} 
</script>
```

**GitHub icon**

```html
<script>
const gitHubLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const socialsContainers = document.querySelectorAll(".socials");

const socialLinkHTML = `<a class="socials__link" href="${gitHubLink}" target="_blank" rel="noopener noreferrer" aria-label="My GitHub Link">
<div class="socials__icon-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2C5.58248 2 2 5.67467 2 10.2034C2 13.8286 4.29333 16.9006 7.47124 17.9855C7.51578 17.9953 7.56126 18.0001 7.60686 18C7.904 18 8.01829 17.7821 8.01829 17.5931C8.01829 17.3966 8.01067 16.8823 8.00686 16.1966C7.7423 16.2584 7.47168 16.2906 7.2 16.2926C5.66095 16.2926 5.31048 15.0964 5.31048 15.0964C4.94629 14.1501 4.42133 13.8964 4.42133 13.8964C3.72495 13.4072 4.41752 13.3935 4.47162 13.3935H4.47467C5.27848 13.4644 5.69981 14.243 5.69981 14.243C6.09981 14.9432 6.63543 15.139 7.11467 15.139C7.43104 15.133 7.74258 15.0603 8.02895 14.9257C8.09981 14.3962 8.30705 14.0358 8.53562 13.8286C6.76038 13.6213 4.89295 12.9181 4.89295 9.77523C4.89295 8.87847 5.20381 8.14628 5.71429 7.57485C5.632 7.36762 5.35695 6.53181 5.79276 5.40343C5.85138 5.38951 5.91161 5.38362 5.97181 5.3859C6.26133 5.3859 6.91429 5.49638 7.99314 6.24686C9.3036 5.88024 10.6895 5.88024 12 6.24686C13.0789 5.49638 13.7318 5.3859 14.0213 5.3859C14.0815 5.38361 14.1418 5.3895 14.2004 5.40343C14.6354 6.53181 14.3604 7.36762 14.2789 7.57485C14.7893 8.15009 15.1002 8.88228 15.1002 9.77523C15.1002 12.9249 13.229 13.6175 11.4461 13.8209C11.7318 14.0747 11.9893 14.5752 11.9893 15.3394C11.9893 16.4358 11.9787 17.3211 11.9787 17.5893C11.9787 17.7821 12.0891 18 12.3855 18C12.4336 18.0002 12.4817 17.9954 12.5288 17.9855C15.7105 16.8998 18 13.8255 18 10.2034C18 5.67467 14.4175 2 10 2Z" fill="#261651"/>
</svg>
</div>
</a>`

  if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
} 
</script>
```

**LinkedIn icon**

```html
<script>
const linkedInLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const socialsContainers = document.querySelectorAll(".socials");

const socialLinkHTML = `<a class="socials__link" href="${linkedInLink}" target="_blank" rel="noopener noreferrer" aria-label="My LinkedIn Link">
<div class="socials__icon-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.8169 2.00011H3.1831C3.02984 1.998 2.87767 2.02591 2.73526 2.08226C2.59286 2.13861 2.46302 2.22229 2.35316 2.32852C2.24329 2.43475 2.15556 2.56145 2.09496 2.70139C2.03437 2.84133 2.0021 2.99176 2 3.1441V16.8559C2.0021 17.0082 2.03437 17.1587 2.09496 17.2986C2.15556 17.4385 2.24329 17.5653 2.35316 17.6715C2.46302 17.7777 2.59286 17.8614 2.73526 17.9177C2.87767 17.9741 3.02984 18.002 3.1831 17.9999H16.8169C16.9702 18.002 17.1223 17.9741 17.2647 17.9177C17.4071 17.8614 17.537 17.7777 17.6468 17.6715C17.7567 17.5653 17.8444 17.4385 17.905 17.2986C17.9656 17.1587 17.9979 17.0082 18 16.8559V3.1441C17.9979 2.99176 17.9656 2.84133 17.905 2.70139C17.8444 2.56145 17.7567 2.43475 17.6468 2.32852C17.537 2.22229 17.4071 2.13861 17.2647 2.08226C17.1223 2.02591 16.9702 1.998 16.8169 2.00011ZM6.85312 15.3919H4.43863V8.19203H6.85312V15.3919ZM5.64588 7.18404C5.31289 7.18404 4.99354 7.05256 4.75808 6.81851C4.52262 6.58447 4.39034 6.26704 4.39034 5.93606C4.39034 5.60507 4.52262 5.28764 4.75808 5.0536C4.99354 4.81956 5.31289 4.68807 5.64588 4.68807C5.82269 4.66814 6.00175 4.68556 6.17133 4.73918C6.3409 4.7928 6.49717 4.88142 6.6299 4.99924C6.76264 5.11706 6.86883 5.26141 6.94155 5.42285C7.01426 5.58429 7.05185 5.75918 7.05185 5.93606C7.05185 6.11294 7.01426 6.28782 6.94155 6.44926C6.86883 6.6107 6.76264 6.75506 6.6299 6.87287C6.49717 6.99069 6.3409 7.07931 6.17133 7.13293C6.00175 7.18656 5.82269 7.20397 5.64588 7.18404ZM15.5614 15.3919H13.1469V11.528C13.1469 10.56 12.8008 9.928 11.9235 9.928C11.652 9.92998 11.3877 10.0146 11.1661 10.1705C10.9445 10.3264 10.7762 10.5461 10.6841 10.8C10.6211 10.988 10.5938 11.186 10.6036 11.384V15.3839H8.18913V8.18402H10.6036V9.20001C10.823 8.8217 11.142 8.51004 11.5263 8.29859C11.9106 8.08713 12.3457 7.98391 12.7847 8.00003C14.3944 8.00003 15.5614 9.03201 15.5614 11.248V15.3919Z" fill="#261651"/>
</svg>
</div>
</a>`

  if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
} 
</script>
```

**Telegram icon**

```html
<script>
const telegramLink = "CHANGE_THIS_TO_YOUR_SOCIAL_LINK";
const socialsContainers = document.querySelectorAll(".socials");

const socialLinkHTML = `<a class="socials__link" href="${telegramLink}" target="_blank" rel="noopener noreferrer" aria-label="My Telegram Link">
<div class="socials__icon-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1C5.032 1 1 5.032 1 10C1 14.968 5.032 19 10 19C14.968 19 19 14.968 19 10C19 5.032 14.968 1 10 1ZM14.176 7.12C14.041 8.542 13.456 11.998 13.159 13.591C13.033 14.266 12.781 14.491 12.547 14.518C12.025 14.563 11.629 14.176 11.125 13.843C10.333 13.321 9.883 12.997 9.118 12.493C8.227 11.908 8.803 11.584 9.316 11.062C9.451 10.927 11.755 8.83 11.8 8.641C11.8063 8.61237 11.8054 8.58265 11.7976 8.55442C11.7897 8.52619 11.7751 8.5003 11.755 8.479C11.701 8.434 11.629 8.452 11.566 8.461C11.485 8.479 10.225 9.316 7.768 10.972C7.408 11.215 7.084 11.341 6.796 11.332C6.472 11.323 5.86 11.152 5.401 10.999C4.834 10.819 4.393 10.72 4.429 10.405C4.447 10.243 4.672 10.081 5.095 9.91C7.723 8.767 9.469 8.011 10.342 7.651C12.844 6.607 13.357 6.427 13.699 6.427C13.771 6.427 13.942 6.445 14.05 6.535C14.14 6.607 14.167 6.706 14.176 6.778C14.167 6.832 14.185 6.994 14.176 7.12Z" fill="#261651"/>
</svg>
</div>
</a>`

  if (socialsContainers.length) {
  socialsContainers.forEach((container) => {
    container.insertAdjacentHTML("beforeend", socialLinkHTML)
  })
} 
</script>
```

* Copy this code and paste it inside **Site footer** input area
*   Then, change **`"CHANGE_THIS_TO_YOUR_SOCIAL_LINK"`** to your social account link, like this:&#x20;

    <figure><img src="https://570087162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwvffoSogkWPRht0dQCRD%2Fuploads%2FUbTV9QuVdk199x78m6XU%2F1.JPG?alt=media&#x26;token=7d8875fb-8e40-4d6a-83f3-8ce11bb4ea09" alt=""><figcaption></figcaption></figure>
* Click <mark style="color:green;">**Save**</mark> to save your work!
