Try ShortPoint nowLearn how to add a weather widget to your SharePoint page using ShortPoint's free Code Editor Web Part. You may go through the quick walkthrough (if you're already familiar with the Code Web Part) or follow the step-by-step tutorial for detailed instructions.
TABLE OF CONTENTS
Prerequisite
- You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.
Quick Walkthrough
1. Find the weather widget you want to use and copy the embed code.
2. Go to your SharePoint page and add the ShortPoint Code Web Part.
3. Click the Edit Properties icon of the ShortPoint Code to edit it.
4. Click Import Code to paste the copied code.
5. If you wish to edit the code, click the field you want to make changes to and edit it according to your needs. Once done, click Save.
6. Republish the page.
Step-by-step Tutorial
Go through the steps to learn how to add a weather widget to your page:
Step 1: Copy the Embed Code
Look for the weather widget you want to use. To help you get started, we made these widgets for you. Copy the option you want to use:
Option 1: Weather Scrolling Ticker
<div id="ww_306ac85834cbd" class="weather-scrolling-ticker" v='1.3' loc='id' a='{"t":"ticker","lang":"en","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}'>More forecasts: <a href="https://oneweather.org/london/30_days/" id="ww_306ac85834cbd_u" target="_blank">30 day weather forecast London</a></div>
<script async src="https://app3.weatherwidget.org/js/?id=ww_306ac85834cbd"></script>
|||||
.weather-element {
zoom: 1.2;
text-align: center;
}
.weather-element {
user-select: none !important;
}
.weather-element,
.weather-element a,
.weather-element a:visited,
.weather-element a:hover {
color: white;
cursor: default;
}
.ww-box {
margin-left: auto !important;
margin-right: auto !important;
}
.ww_source {
display: none !important;
}
.ww_line {
margin 0 28px !important;
}
div.ControlZone--control:has(div[id^="ShortPointCode-"]) {
background-color: unset !important;
}
&>div {
width: fit-content;
max-width: 100%;
margin: 0 auto;
color: white !important;
}
|||||Option 2: Weather Large Widget
<div id="ww_0d339707284ef" class="weather-large-card" v='1.3' loc='auto' a='{"t":"horizontal","lang":"en","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}'>
More forecasts: <a href="https://oneweather.org/orlando/30_days/" id="ww_0d339707284ef_u" target="_blank">Orlando weather 30 day</a>
</div>
<script async src="https://app3.weatherwidget.org/js/?id=ww_0d339707284ef"></script>
|||||
.weather-card {
border-radius: 20px !important;
width: 100%;
max-width: 500px /*{Field0 - Max Width (Default 500px)}*/;
zoom: 1.5 /*{Field1 - Overall Size (Default 1.5)}*/;
text-align: center;
}
.weather-card {
user-select: none !important;
}
.weather-card,
.weather-card a,
.weather-card a:visited,
.weather-card a:hover {
color: white;
cursor: default;
}
.ww-box {
margin-left: auto !important;
margin-right: auto !important;
}
.ww_source {
display: none !important;
}
.ww_arr_right,
.ww_arr_left {
opacity: 0 !important;
cursor: default !important;
}
.ww_line {
margin 0 28px !important;
}
div.ControlZone--control:has(div[id^="ShortPointCode-"]) {
background-color: unset !important;
}
&>div {
width: fit-content;
max-width: 100%;
margin: 0 auto;
}
|||||Option 3: Weather Thin Bar
<div id="ww_e2e3f85ec21fc" class="weather-thin-bar" v='1.3' loc='id' a='{"t":"responsive","lang":"en","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"fahrenheit","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}'>More forecasts: <a href="https://oneweather.org/new_york_city/30_days/" id="ww_e2e3f85ec21fc_u" target="_blank">30 day weather forecast NYC</a></div>
<script async src="https://app3.weatherwidget.org/js/?id=ww_e2e3f85ec21fc"></script>
|||||
.weather-element {
zoom: 1.2 /*{Field0 - Overall Size Default 1}*/;
text-align: center;
}
.weather-element {
user-select: none !important;
}
.weather-element,
.weather-element a,
.weather-element a:visited,
.weather-element a:hover {
color: white;
cursor: default;
}
.ww-box {
margin-left: auto !important;
margin-right: auto !important;
}
.ww_source {
display: none !important;
}
.ww_line {
margin 0 28px !important;
}
div.ControlZone--control:has(div[id^="ShortPointCode-"]) {
background-color: unset !important;
}
&>div {
width: fit-content;
max-width: 100%;
margin: 0 auto;
color: white !important;
}
|||||TIPIf you’re looking for more weather widget designs, you can check out weatherwidget.org. They have a selection of weather widgets, from tickers to vertical and horizontal widgets.
Step 2: Add the ShortPoint Code Web Part
Go to the SharePoint page where you want to add the weather widget and click Edit:
Click the close icon to leave the Toolbox:
Select the plus icon to add a web part:
Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:
Step 3: Edit the ShortPoint Code Web Part
Click the Edit Properties icon:
Step 4: Paste the Code
Click Import Code to paste the code you copied:
You will get a pop-up asking if you want to overwrite the current code with the code in your clipboard. Click OK:
You will get a notice that the code was successfully imported from your clipboard. Click OK again:
If you wish to customize the code, click the field you want to edit. For example, if we want to make changes in the Edit CSS field, we simply need to select it, make our changes, and click Save:
Step 5: Republish Page
Click the close icon to leave the ShortPoint Code Editor:
Click Republish once you’re ready to make your changes live:
Congratulations! You now have an on-the-go weather widget on your SharePoint page. If you’re looking for more ways to use the ShortPoint code web part, you can check the tutorials below:
- How to Add an X Post to a SharePoint Page
- How to Add an Instagram Post to a SharePoint Page
- How to Add a LinkedIn Post to a SharePoint Page
- How to Add a Viva Engage Feed to a SharePoint Page
- How to Embed a YouTube Video Playlist to a SharePoint Page
- How to Embed a Vimeo Video Playlist to a SharePoint Page
- How to Add a Stock Widget to a SharePoint Site
