How to Use Widgets

widgetai.online

FAQ: Embedding Widgets

This guide explains how to use pre-provided iframe codes or direct links from widgetai.online to integrate interactive tools into various platforms.

1 Getting Your Code or Link

Before you can embed a widget, you need to grab its unique iframe code or direct link from your dashboard.

The "Get Code" Icon

On your My Widgets page, each widget has a set of action icons at the bottom right of its card.

  • Click the Get Code icon

    This opens a window containing your Iframe Code (for websites) and your Direct Link (for Notion or social media).

  • Copy & Paste

    Simply click the "Copy Code" or "Copy Link" buttons to save the information to your clipboard, ready to be used in the steps below.

2 WordPress & Web-Based Systems

Most CMS platforms (WordPress, Wix, Squarespace, Shopify) use a "Block" or "Element" system to handle custom code.

WordPress

Method: Add a Custom HTML block.

Step: Paste the <iframe> code from widgetai.online directly into the block. Preview to verify.

Wix

Method: Go to Add Elements (+) > Embed Code > Embed HTML.

Step: Select "Code" and paste your iframe snippet into the editor box.

Squarespace

Method: Add a Code Block (preferred for widgets) or an Embed Block.

Step: Select "Code Snippet" in the settings and paste your widgetai.online code.

Shopify

Method: In the Page or Product editor, click the Show HTML (<>) button.

Step: Paste the iframe code directly into the HTML editor where you want the widget to appear.

3 Link-Based Embeds (Notion & Workspace Tools)

Modern collaboration tools prioritize "smart links" that automatically expand into interactive windows.

Notion

Method: Quick Paste or /embed command.

Step: Copy the widget URL from widgetai.online, paste it into Notion, and select Create Embed.

Adjustment: Click and drag the handles to change the size of the widget once it appears.

Slack

Method: Direct Message or Channel post.

Step: Paste the widgetai.online link. While Slack doesn't support full interactive iframes inside a chat, it will often generate a rich preview.

Note: For full interactivity, users must click the link to open the widget in a browser.

Microsoft Teams

Method: Tab or Channel post.

Step: To keep a widget permanently visible, click the (+) at the top of a channel, select Website, and paste your widget URL. This embeds the tool as a dedicated tab.

Confluence

Method: /iframe or /widget-connector macro.

Step: Type /iframe, paste the URL from widgetai.online, and set the width/height in the sidebar settings.

4 Quick Troubleshooting

Platform Common Issue Solution
Mobile Widget looks squashed In iframe code, change width="[number]" to width="100%".
Notion Only shows a box/link You chose "Create Bookmark" instead of "Create Embed." Delete and try again.
Wix Widget disappears Ensure the URL in your code starts with https://. Wix often blocks http:// for security.