Add your profile to a website

You can drop your NoTrouble profile straight into your own website. It shows up as a live card, right on your page, and it updates on its own when you change your profile. You add one line of code to your site, with your handle in it. It's no trouble.

Before you start

This works on any website where you can paste in a bit of code. That covers most site builders and hand-coded pages. Want a quick share instead? You can also hand out your profile's QR code.

Two things have to be on for your profile to appear:

Your profile must be Published.
Your profile must be Embeddable.

Both are switches on your profile's Settings page. We'll turn them on below.

How do I put my profile on my own website?

The short version: turn on embedding, write one line of code with your handle in it, and paste it where you want your profile to show. Here's each step.

Go to your profile's Settings page.
Find the Visibility & Features card.
Turn on the Embeddable toggle. Its note reads "Allow embedding on external sites".
Make sure Published is on too, in the same card.
Select Save changes. You'll see a "Settings saved." message.
Write the one-line embed code yourself. The next section shows the exact line and what to put in it.
Paste that line into your website where you want the profile to appear.

Once the page loads, your profile card shows up in that spot.

Where do I turn on embedding?

The switch lives on your profile's Settings page.

Open the profile you want to embed.
Go to Settings.
Scroll to the Visibility & Features card.
Turn on the Embeddable toggle.
Select Save changes.

You'll know it saved when a green "Settings saved." note pops up. If you don't turn this on, your profile won't load on outside sites.

What does the embed code look like?

You write the code yourself. It's a single <script> line. Here's the shape:

<script data-handle="your-handle" src="https://yoursite/embed/profile.js"></script>

Two parts to fill in:

data-handle: your own handle. That's the name part of your profile's web address. If your profile lives at jordan.notrouble.com, your handle is jordan (the part before the first dot).
src: the NoTrouble address with /embed/profile.js on the end. Use the same address you see when you open NoTrouble in your browser, then add /embed/profile.js.

Type the line out, drop in your handle, and paste it into your page's HTML where you want the card to show. When the page loads, the script pulls in your profile and drops the card right after that line. (Need your profile's web address? See how to share your profile.)

Can I change the layout or style of the embedded version?

Yes. You can add two settings to the code to control the look, without changing your real profile.

<script
  data-handle="your-handle"
  data-layout="foundation"
  data-style="modern"
  src="https://yoursite/embed/profile.js"></script>

data-layout sets the arrangement. Choices are foundation, spotlight, billboard, stack, horizon, and bookmark.
data-style sets the look. Choices are clean, modern, scattered, frosted, bold, and dimension.

Leave both off and the embed uses the same theme as your live profile. These two settings only change the embedded card, so your real profile stays as you set it.

My embedded profile isn't showing up

A blank spot where your card should be almost always comes down to the two switches. Start there:

Is the profile published? A profile has to be live before it can show anywhere outside your account. Go to Settings, turn on Published, and save.
Is embedding on? Go to Settings, turn on the Embeddable toggle, and save. Both switches must be on at the same time.
Did you change the handle? The code points at one handle. If you renamed your handle after adding the line, the old handle no longer matches. Update the handle in your line to the new one.

After you fix the switches, reload your website. The card loads a moment after the page does, so give it a second.

You won't get a warning when a switch is off. The card skips loading and leaves a blank space, instead of showing a broken box. So a blank spot is your cue to check the two switches above.

The card loads but looks plain or unstyled

This is normal for the first half-second. The card draws its text first, then loads its fonts and colors right after. If it stays plain for longer, your website may block outside content. Check that your site allows the script to load from NoTrouble, then reload the page.

Links inside the card open my own site by mistake

We handle this for you. Buttons inside the card, like a booking or contact link, open on your profile's own web address in a new tab. So a visitor who taps one lands on your real profile, not a missing page on your site. If a link looks wrong, double-check the handle in your line matches your profile, then reload the page.