Add an iFrame integration

When the tool you want isn’t on the marketplace yet, you can embed any web URL as a tool dock. Agents press a shortcut and your page loads in a slide-out panel next to the conversation.

Before you start

• A user role that can edit Toolbox settings (typically Admin)
• The URL of the page you want to embed (must be reachable over HTTPS)
• If the page requires login: OAuth client credentials, or a way for the agent to authenticate inside the iframe
• The page’s Content-Security-Policy and X-Frame-Options headers must allow embedding from your Atender domain. If they don’t, the page won’t load — talk to whoever runs the target service.

Steps

1. Open Settings → Toolbox.
2. Under Custom integrations, click New integration.
3. Fill in the configuration:

• Name — The display name agents will see (e.g., “Order Admin”).
• Shortcut key — A single letter. Agents press X then this letter to open the dock. Pick something that maps to the name — O for Order Admin, J for Jira.
• iFrame URL — The full URL to embed, including https://.
• OAuth credentials — Only fill in if the integration requires OAuth. Provide the client ID and secret your auth provider issued. Atender stores them encrypted.
• Default size — Pick Normal (360px), Expanded (600px), or Full (50% viewport). See What is the Toolbox? for size guidance.
• Allow resizing — Let agents resize the dock on the fly. Toggle on for most cases.
• Enabled — Toggle on to make the dock available to agents. Toggle off to disable without deleting the configuration.

4. Click Save.
5. Open any conversation and press X then your shortcut letter. The dock should slide in with your page loaded.

Verify it worked

• Pressing X + <your letter> in any conversation opens the dock.
• The page loads inside the panel without Refused to display in a frame errors in the browser console.
• The dock respects the default size you chose.
• If your integration uses Atender’s conversation context, the page reflects the right customer / conversation as soon as it opens.

Troubleshooting

• Symptom: The dock opens but the page is blank or shows “refused to connect.” Fix: The target page is sending X-Frame-Options: DENY or a Content-Security-Policy: frame-ancestors directive that excludes Atender. The page operator needs to whitelist your Atender domain. There is no client-side workaround.

• Symptom: OAuth credentials don’t save and the integration shows an encryption error. Fix: Your environment is missing the OAuth credential encryption key. Contact your Atender deployment lead — credential encryption requires the key to be configured at the environment level.

• Symptom: The shortcut conflicts with another tool dock. Fix: Open the conflicting integration and change one of the letters. Only one tool can claim each letter under the X + namespace.

• Symptom: Agents say “the dock doesn’t know which customer I’m looking at.” Fix: Your integration isn’t reading the conversation context Atender sends. See Tool dock actions reference — the dock has to listen for the context message and update its UI accordingly.

See also

• Tool dock actions reference
• What is the Toolbox?
• Connect a marketplace integration