MyOwnBible offers web developers the ability to embed Bible verse autolinking and preview directly into your websites. With a plug-n-play script, website visitors will see hyperlinked scripture verse references that launch MyOwnBible.app and provide quick popover preview of the verses as well as verse sharing to social media.
Copy and paste the following script into the <head> section of your website:
<script src="https://www.myownbible.app/embed.js" defer></script>
Paste in content containing scripture references into the textarea input below, then press the "Generate Preview" button to have it parse the text and find the scripture references.
Paste Your Content
Embed Preview
The embed script is full of configurable options. Set popover: false to disable the popover feature. Disable automatic rendering when the script loads by setting render: false. Change Bible translation language by setting language: "en-US"and set it to the ISO3 abbreviation for a supported translation. Then manually render on the entire document or within select elements when ready by using MOB.init(config)or MOB.render(element). You can get all the parsed scripture references on the page or within an element using MOB.parse(element).
You can also customize the styling of the CSS classes .mob-link, .mob-card, and.mob-btns with inline style overrides or completely disable them using the configuration options. Set styles: false to disable default styles.
Use this code sample instead of the simple script embed to customize MyOwnBible:
<script>
window.MOBConfig = {
render: true,
styles: true,
popover: false,
language: "en-US",
app: "https://web.myownbible.app",
api: "https://api.myownbible.app"
};
var o = document.createElement('script');
o.src = "https://www.myownbible.app/embed.js";
o.defer = true;
document.head.appendChild(o);
</script>
<style>
.mob-link {
color: #ff0000 !important;
}
.mob-card h1,
.mob-card p {
color: #000 !important;
}
.mob-btns button {
background-color: #0000ff !important;
}
</style>