Embedded RepSky Docs

How to Embedded Rep in Your Website

Rep Embedded allows you to seamlessly integrate Rep's services into your website using an <iframe> and a script. Follow these steps to set it up:

Step 1: Add the `<iframe>`

Insert the <iframe> tag into your HTML. This frame will display the content from Rep.


<iframe
  title="rep-iframe"
  id="rep-iframe"
  class="iframe-container"
  src="https://prod-extension.rsky.ai"
  allow="clipboard-read; clipboard-write"
></iframe>

Attribute Explanation:

title: Provides a title for the iframe, which improves accessibility, especially for screen readers.

id: A unique identifier for the iframe. Do not change this ID as it may be referenced by scripts.

class: Used to apply custom CSS styles to the iframe.

src: The URL of the Rep service you want to embed.

Step 2: Embedded the Script

Add the Rep script to your page to enable functionality. Place the script at the end of the <body> or in the <head> with the defer attribute to ensure it loads after the HTML is parsed.

Option 1: End of <body>


<script src="https://prod-extension.rsky.ai/iframe/index.js"></script>

Option 2: In <head> with defer


<script src="https://prod-extension.rsky.ai/iframe/index.js" defer></script>

Why defer?

The defer attribute ensures that the script is executed after the document has been completely parsed, which helps improve load performance without blocking the HTML parsing process.

Step 3: Verify and Customize

Check Size and Position: Ensure the iframe is styled correctly to fit into your site's layout. Use CSS to control its size and appearance.


.iframe-container {
    width: 375px;
    max-width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    right: 0px;
    top: 0px;
    background: black;
    transition: 0.3s;
    border: 1px solid #e1e1e1;
}
.iframe-container--open {
    transform: translateX(0px);
}

.iframe-container--closed {
    transform: translateX(100%);
}

Security and Permissions: Review the sandbox attribute settings to ensure you grant only the permissions necessary for your use case. This helps protect your site from potential security vulnerabilities.

Cross-browser Compatibility: Test the iframe across different browsers to ensure consistent behavior and appearance.

Complete Example

Here's a complete HTML example that integrates Rep Embedded into your website:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .iframe-container {
            width: 375px;
            max-width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 9999;
            right: 0px;
            top: 0px;
            background: black;
            transition: 0.3s;
            border: 1px solid #e1e1e1;
        }

        .iframe-container--open {
            transform: translateX(0px);
        }

        .iframe-container--closed {
            transform: translateX(100%);
        }
    </style>
    <script defer src="https://prod-extension.rsky.ai/iframe/index.js"></script>
</head>

<body>
    <iframe title="rep-iframe" id="rep-iframe" class="iframe-container iframe-container--open" src="https://prod-extension.rsky.ai"
        allow="clipboard-read; clipboard-write"></iframe>
</body>

</html>

Demo

To see RepSky Embedded in action, you can view the live demo here: RepSky Embedded Demo.

Additional Tips

Responsive Design: Ensure the iframe remains responsive across different devices. You can use CSS media queries to adjust the iframe's size based on screen width.

Accessibility: Consider adding ARIA attributes if needed to enhance accessibility for users relying on assistive technologies.

Testing: Thoroughly test the integration on various devices and browsers to ensure smooth operation and compatibility.

With these steps, you have successfully embedded Rep Embedded into your website. If you encounter any issues or need further assistance, please reach out to Rep's support team.