Embedding
This iFOLIO is meant to demonstrate and provide steps for embedding various elements to your iFOLIO including:
Customized Buttons
Twitter feed/single posts/ buttons
Instagram/LinkedIn single posts
Facebook feed, TikTok
Spotify / Soundcloud
QR codes
Google Maps, Docs, Slides, and Forms
Google Calendar, Calendly
Online pdfs
Docusign
PayPal
Twitch Streams + Chats
Google Chat Bots
Discord Servers
Embed a Customized Button!
- Make your button!
- Go to clickminded.com/button-generator/
- Customize your button- Text, Color
- Embed your button
- Copy button code
- Turn a textfield into HTML
- Use the code below to insert the website URL and button graphic code in the HTML text box!
<a href="URL HERE" target="_blank" rel="noopener noreferrer"><img border="0" src="BUTTON GRAPHIC LINK HERE" class=""></a>
1. Go to your insta post and click three dots in top right.
2. Click Embed and choose if you want the caption or not.
3. Copy and paste code into text block.
1. Go to LinkedIn post and click three dots in top right.
2. Click "Embed this post".
3. Copy and paste the code into a text block.
Twitter Feed
1. Visit https://publish.twitter.com
2. Enter the URL of the Twitter page you want
3. Select "Embedded Timeline"
4. Select desired customization options
5. Copy and paste code into text block
Twitter Post
1. Visit https://publish.twitter.com
2. Enter the URL of the Twitter post you want
3. Select desired customization options
4. Copy and paste code into text block
Facebook Feed
1. Visit https://developers.facebook.com/docs/plugins/page-plugin/
2. Enter the URL of the Facebook page you want
3. Edit customization options (width, height)
4. Click Get Code > iFrame
5. Copy and paste code into text block
TikTok
1. Click Share > Embed > Copy Code
Spotify Music Player
1. Go to playlist, album, or song you want, click the 3 dots then Share > Copy Embed Code
2. Paste code into text block
3. Note - must be using Desktop App, not site
View Our Spotify Embed Here!
Embed Music/Podcasts from Soundcloud
1. Click "Share" and "Embed"
2. Edit customizations and copy paste code
Google Map
1. Go to the location you wish to embed
2. Click the three lines in the top right to reveal the dropdown menu
3. Go to Share or Embed Map
4. For multiple locations, visit My Maps - Google, add multiple points.
5. Click "Share" to publish map first, then click the three dots on top right and click "Embed map on my site"
6. "Copy HTML" to paste here
Google Map
1. Go to the location you wish to embed
2. Click the three lines in the top right to reveal the dropdown menu
3. Go to Share or Embed Map
4. For multiple locations, visit My Maps - Google, add multiple points.
5. Click "Share" to publish map first, then click the three dots on top right and click "Embed map on my site"
6. "Copy HTML" to paste here
7. Copy & paste the following bolded code around <iframe> ... </iframe> to ensure mobile responsiveness
<style>.google-maps {position: relative;padding-bottom: 45%;height: 0;overflow: hidden;}.google-maps iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}</style><div class="google-maps">
<iframe>....</iframe>
</div>
Google Docs
1. File > Publish to web > Embed > Publish
2. Copy and paste the code into a text block within your iFOLIO
3. Replace URL, width, and height with the values that you want
Google Slides
Any google doc, slide, sheet can also be embedded using:
<iframe src="DOCUMENT URL" width="width (e.g. 500px)" height="height"></iframe >
Document must be public in order to be viewed by people outside or your organization!
Google Form
Click on Send > Send via Embed Code (last option)
Copy and paste code into text block
Fun Tip!
Having problems with setting the correct width or centering the embed frame properly? Try these tips:
make width ="100%"
Google Calendar Invite
Let guests add an event to their calendar. You have the option to link or embed.
You can change the button look by replacing the URL for graphic in html.
Non-Google Document
<iframe src="URL HERE" width="100%" height="500"> </iframe>
PayPal
1. Visit this link: https://www.paypal.com/buttons/
2. Select the button that you want, log in and style it
3. Click "Copy Code" or "Create Button"
Twitch requires embed users to verify where they use our products on the web using a special parameter: <parent>
ifolio.cloud is our parent parameter
Remove <> when entering parameters
Video Stream
<iframe src="https://player.twitch.tv/?channel=<CHANNEL>&parent=ifolio.cloud&muted=true"height="500" width="800" allowfullscreen="true"> </iframe>
Twitch Stream & Chat
<center><iframe src="https://embed.twitch.tv/?theme=dark&autoplay=true&parent=ifolio.cloud&channel=thegamehers&layout=video-with-chat" width="100%" height="500" frameborder="0" allow="autoplay; fullscreen" sandbox="allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" allowfullscreen=""></iframe></center>
Google FAQ Chat Bots
Discord Server Widget
**If a server is already created, skip to step 3**
1. To create a new server, click the + button on the left-hand side.
2. Follow the prompts to properly set up server.
3. Navigate to the new server's icon on the left-hand side and right click it.
4. Hover over "server settings" and select "widget".
5. Once the Server Widget screen populates, find the section labeled "Premade Widget" and click copy.
6. Switch over to your iFOLIO and add a new text block. Toggle on the "HTML" option and paste the premade widget code.
7. To view the widget, toggle on the "preview" option. To return back to the code, toggle the "preview" option off.
8. To adjust the widget's width and height, change the numbers in the html pasted code in the respective sections. Ex: width = "500" (edit the 500)
**Helpful tip: To make the widget fully fit in the space (fully dynamic on all screens), type "100%" instead of a numeric value after
"width = " or "height = " **
1. Visit dialogflow.cloud.google.com
2. Use the two videos below to learn how to integrate a customized or automated Google chat bot
Create an Agent
Google's Dialogflow has natural language processing and AI to make a helpful chatbot for anyone.
Creating an Agent create a google cloud project with default language and time settings as well as hosts your chat bot code.
Click the Integrations tab to embed your final bot after testing.
Import an FAQ Website
You can insert a FAQ website for Google's AI to read and create responses. Instead of manually applying "Intents", go to the Knowledge Base tab and create a Knowledge Base with the website to reference from. Follow along with the video to import references, then go back to the end of the video on the left to see how to get the <iframe> integrated embed.
iFOLIO Inception: So you want an iFOLIO within an iFOLIO?
Visit iframe-generator.com and paste your published iFOLIO link and copy generated HTML. Change width to 100% so it can be dynamic on all screens.