Alphadoc Embeds

Embed interactive components in your developer onboarding

Easily embed our JS components into your stack, docs, website or application. Deliver great demos and developer onboarding.

Customizable

Keep up-to-date automatically

Search indexable

Alphadoc Embeds

Embed interactive components in your developer onboarding

Easily embed our JS components into your stack, docs, website or application. Deliver great demos and developer onboarding.

Customizable

Keep up-to-date automatically

Search indexable

Alphadoc Embeds

Embed interactive components in your developer onboarding

Easily embed our JS components into your stack, docs, website or application. Deliver great demos and developer onboarding.

Customizable

Keep up-to-date automatically

Search indexable

<html> 
  <head> 
    <script src="http://localhost:3002/code-walkthrough/wc.js" defer="defer"></script> 
    <link href="http://localhost:3002/code-walkthrough/styles.css" rel="stylesheet" /> 
  </head>
  <body> 
    <code-walkthrough 
        block-id="XXX" 
        project-version-id="XXX" 
        theme="dark" 
        offset-from-top="48" 
        vertical-padding="32" >
     </code-walkthrough> 
  </body> 
  <html></html> 
</html>

Alphadoc Embeds

<html> 
  <head> 
    <script src="https://app.alphadoc.io/api-endpoint/wc.js" defer="defer"></script> 
    <link href="https://app.alphadoc.io/api-endpoint/styles.css" rel="stylesheet" /> 
  </head>
  <body> 
    <api-endpoint  
        block-id="XXX" 
        project-version-id="XXX" 
        theme="dark" 
        offset-from-top="48" 
        vertical-padding="32" >
     </api-endpoint> 
  </body> 
  <html></html> 
</html>

Generate Embed

Alphadoc's embeds really help us explain our SDKs to onboarding developers. They fit perfectly in our docs and they're easier to follow than our old code samples.

Chad Gosier

Senior Technical Writer, Customer.io

How it works

API Endpoint

Code Walkthrough

Diagram

Variables

API Endpoint

Code Walkthrough

Diagram

Variables

Create your component

Create your component

Design your unique component effortlessly

Design your unique component effortlessly

File name

Highlight code

Start Typing|

code tab

// Write your code

Configure your component

Add the content and tailor to your needs

server.js

client.js

checkout.html

document.addEventListener('DOMContentLoaded', function() {
    const checkoutButton = document.getElementById('checkout-button'); // Ensure you have a button with this ID in your HTML

    checkoutButton.addEventListener('click', function() {
        createCheckoutSession();
    });
});

async function createCheckoutSession() {
    try {
        const response = await fetch('http://localhost:4242/create-checkout-session', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            // You can send additional data if needed
        });

        if (response.ok) {
            const session = await response.json();
            // Redirect to the URL provided by the session (usually a checkout URL)
            window.location = session.url;
        } else {
            console.error('Failed to create checkout session');
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

Configure your component

Add the content and tailor to your needs

server.js

client.js

checkout.html

const progex = require(’progex’)('sk_test_Gx4mWEgHtCMr4DYMUIqfIrsz');
const express = require('express');
const app = express();
app.use(express.static('public'));

const YOUR_DOMAIN = 'http://localhost:4242';

app.post('/create-checkout-session', async (req, res) => {
  const session = await acme.checkout.sessions.create({
    line_items: [
      {
        // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
        price: '{{PRICE_ID}}',
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}/success.html`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,
  });

  res.redirect(303, session.url);
});

app.listen(4242, () => console.log('Running on port 4242'));

Generate Embed

Generate embed script

Efficiently produce ready-to-use JS embed scripts

server.js

client.js

checkout.html

const progex = require(’progex’)('sk_test_Gx4mWEgHtCMr4DYMUIqfIrsz');
const express = require('express');
const app = express();
app.use(express.static('public'));

const YOUR_DOMAIN = 'http://localhost:4242';

app.post('/create-checkout-session', async (req, res) => {
  const session = await acme.checkout.sessions.create({
    line_items: [
      {
        // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
        price: '{{PRICE_ID}}',
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}/success.html`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,
  });

  res.redirect(303, session.url);
});

app.listen(4242, () => console.log('Running on port 4242'));

Generate Embed

Generate embed script

Efficiently produce ready-to-use JS embed scripts

<html> 
  <head> 
    <script src="https://app.alphadoc.io/code-walkthrough/wc.js" defer="defer"></script> 
    <link href="https://app.alphadoc.io/code-walkthrough/styles.css" rel="stylesheet" /> 
  </head>
  <body> 
    <code-walkthrough 
        block-id="XXX" 
        project-version-id="XXX" 
        theme="dark" 
        offset-from-top="48" 
        vertical-padding="32" >
     </code-walkthrough> 
  </body> 
  <html></html> 
</html>

Add to your stack

Seamlessly integrate into your website, docs or application

<html> 
  <head> 
    <script src="https://app.alphadoc.io/code-walkthrough/wc.js" defer="defer"></script> 
    <link href="https://app.alphadoc.io/code-walkthrough/styles.css" rel="stylesheet" /> 
  </head>
  <body> 
    <code-walkthrough 
        block-id="XXX" 
        project-version-id="XXX" 
        theme="dark" 
        offset-from-top="48" 
        vertical-padding="32" >
     </code-walkthrough> 
  </body> 
  <html></html> 
</html>

Add to your stack

Seamlessly integrate into your website, docs or application

UPDATED

amount

integer

The total amount of the transaction that the user intends to pay.

Always up to date

Content can be updated via Github, through our API or inside our Alphadoc UI

UPDATED

amount

integer

The total amount of the transaction that the user intends to pay.

Always up to date

Content can be updated via Github, through our API or inside our Alphadoc UI

Start building a strong developer onboarding and go-to-market motion

Code Walkthrough

Step by step code explainer widget. Handy for sample applications and SDKs

Code Walkthrough

Step by step code explainer widget. Handy for sample applications and SDKs

API Reference

All you endpoints in an interactive reference where users can tryout API calls. Automatically updated when you release a new version

API Endpoint

Include your API endpoints anywhere you see fit

API Endpoint

Include your API endpoints anywhere you see fit

Sequence Diagram

Highlight integration scenarios so your customers never get stuck

Sequence Diagram

Highlight integration scenarios so your customers never get stuck

Interactive Tutorial

Use a tutorial to highlight common use-cases for your product

Interactive Tutorial

Use a tutorial to highlight common use-cases for your product

Variables

Declare once, use everywhere. Use variables so your users don't have to enter the same values everywhere

Variables

Declare once, use everywhere. Use variables so your users don't have to enter the same values everywhere

Code Walkthrough

Step by step code explainer widget. Handy for sample applications and SDKs

Code Walkthrough

Step by step code explainer widget. Handy for sample applications and SDKs

API Reference

All you endpoints in an interactive reference where users can tryout API calls. Automatically updated when you release a new version

API Endpoint

Include your API endpoints anywhere you see fit

Sequence Diagram

Highlight integration scenarios so your customers never get stuck

Interactive Tutorial

Use a tutorial to highlight common use-cases for your product

Variables

Declare once, use everywhere. Use variables so your users don't have to enter the same values everywhere

See how companies embed us into their stack

Documentation Embed

Include in documentation sites and developer portals - both internal and customer-facing. Works with cloud solutions (ex. Readme) and OSS (ex. Docusaurus)

Website Embed

Include in your website - Works with any headless CMS and low/no code builders (ex Webflow/Framer)

Website Embed

Include in your website - Works with any headless CMS and low/no code builders (ex Webflow/Framer)

Product Embed

Include in your application - Give developers an interactive onboarding experience inside the context of your product

Product Embed

Include in your application - Give developers an interactive onboarding experience inside the context of your product

Demo Embed

Include in your demo environment - Give prospects an interactive onboarding experience that helps you close the deal

Demo Embed

Include in your demo environment - Give prospects an interactive onboarding experience that helps you close the deal

Documentation Embed

Include in documentation sites and developer portals - both internal and customer-facing. Works with cloud solutions (ex. Readme) and OSS (ex. Docusaurus)

Documentation Embed

Include in documentation sites and developer portals - both internal and customer-facing. Works with cloud solutions (ex. Readme) and OSS (ex. Docusaurus)

Website Embed

Include in your website - Works with any headless CMS and low/no code builders (ex Webflow/Framer)

Website Embed

Include in your website - Works with any headless CMS and low/no code builders (ex Webflow/Framer)

Demo Embed

Include in your demo environment - Give prospects an interactive onboarding experience that helps you close the deal

Product Embed

Include in your application - Give developers an interactive onboarding experience inside the context of your product

Start powering your go to market with Alphadoc Embeds

Sign up now!

No credit card needed and we offer a free-forever plan

Get email support

Request features, report issues, and ask our team any question

Get slack support

Direct support from the Alphadoc team in a shared Slack Connect channel between your organization and our team

Talk to sales

Discuss how we can help your organization reduce support and close more deals

Email sales@alphadoc.io or book a meeting

© Alphadoc BV 2024, All Rights Reserved

© Alphadoc BV 2024, All Rights Reserved

© Alphadoc BV 2024, All Rights Reserved