Adding Elfsight widget to Adobe Portfolio website
If you want to add an Elfsight widget to your Adobe Portfolio website, follow this step-by-step guide to ensure a smooth integration. Let's get started ๐
To understand the difference between floating and static widgets, check out this article - Floating and Static widgets: Understanding the difference.
- 1
-
Go to your Adobe Portfolio admin panel
Log in to your Adobe Portfolio account and choose the website where you want to add the widget. Click on Edit site:
- 2
-
Add a block for the widget
Select the page and spot where you'd like to add the widget, click โ and choose Embed:
- 3
-
Prepare your widget installation code
Adobe Portfolio doesn't support regular Elfsight widget codes, so use this iframe code instead:
<iframe width="1000" height="1000" src="https://apps.elfsight.com/widget/WIDGET_ID" frameborder="0" sandbox="allow-same-origin allow-scripts allow-pointer-lock allow-forms"></iframe>
In the code above, make the following changes:
- Replace WIDGET_ID with the ID of your widget - Where to get your widget ID
- Adjust the height parameter according to your preferences
Here's an example of the final code:
<iframe width="1000" height="650" src="https://apps.elfsight.com/widget/618c9d5e-a47a-479d-9b77-cca32ac48598" frameborder="0" sandbox="allow-same-origin allow-scripts allow-pointer-lock allow-forms"></iframe>
- 4
-
Embed the widget
Paste the iframe code into the Embed Code field and click Save embed:
- 5
-
Adjust the widget's size
Once the widget appears, you can change its width, alignment, and margins in Embed โ Width, Alignment & Margins:
- 6
-
Save the changes
Click Publish Site to make the changes go live:
That's it! You have successfully added the Elfsight widget to a specific page of your Adobe Portfolio website ๐
Unfortunately, Adobe Portfolio doesn't allow you to add a widget to all pages at once. If you want to display your widget on all pages, you'll need to add it to each page manually.