Integrate Into Your Website

Display crypto signals on your site with ready-to-use templates

HTML Templates Copy & Paste Customizable

Overview

Use your API key to fetch signals from the MyCryptoSignal API and display them on your website or app. Choose a template below, replace YOUR_API_KEY with your actual key, and deploy.

What You Need

  • An API key from mycryptosignal.com
  • A website or app to display signals on
  • Visible attribution linking back to mycryptosignal.com

Important

  • Never expose your API key in client-side code on production sites. Use a backend proxy to keep your key secure.
  • All templates require visible attribution. See Attribution section.
  • Signals are informational only, not financial advice.

Quick Start

Three steps to display signals on your site:

Step 1: Get Your API Key

Sign up at mycryptosignal.com/get-access. Keys are issued within 24-48 hours.

Step 2: Choose a Template

Pick one of the templates below, or build your own using our API endpoints.

Step 3: Deploy

Replace YOUR_API_KEY, add to your site, and include the required attribution.

Signal Widget

A complete, styled signal dashboard you can drop into any page. Displays all signals sorted by confidence with auto-refresh.

signal-widget.html - Full Page Template 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Crypto Signals</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #0a0e27; color: #fff;
      min-height: 100vh; padding: 20px;
    }
    .container { max-width: 1000px; margin: 0 auto; }
    h1 { font-size: 2rem; margin-bottom: 1.5rem; }
    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px; margin-bottom: 2rem;
    }
    .stat {
      background: rgba(255,255,255,0.05);
      padding: 16px; border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .stat-value { font-size: 2rem; font-weight: bold; color: #0EA5E9; }
    .stat-label { font-size: 0.85rem; color: #94a3b8; margin-top: 4px; }
    .signals { display: grid; gap: 16px; }
    .signal {
      background: #1a1f3a; border-radius: 10px;
      padding: 20px; border-left: 4px solid #666;
    }
    .signal.BUY { border-left-color: #22c55e; }
    .signal.RISK { border-left-color: #ef4444; }
    .signal.HOLD { border-left-color: #f59e0b; }
    .signal-top {
      display: flex; justify-content: space-between;
      align-items: center; margin-bottom: 10px;
    }
    .coin-name { font-size: 1.25rem; font-weight: bold; }
    .coin-symbol { color: #94a3b8; font-size: 0.85rem; }
    .badge {
      display: inline-block; padding: 6px 14px;
      border-radius: 16px; font-weight: bold; font-size: 0.85rem;
    }
    .badge.BUY { background: rgba(34,197,94,0.2); color: #22c55e; }
    .badge.RISK { background: rgba(239,68,68,0.2); color: #ef4444; }
    .badge.HOLD { background: rgba(245,158,11,0.2); color: #f59e0b; }
    .confidence { font-size: 1.5rem; font-weight: bold; margin-top: 4px; }
    .explanation { color: #cbd5e1; line-height: 1.6; margin-bottom: 8px; }
    .timestamp { font-size: 0.75rem; color: #475569; }
    .attribution {
      text-align: center; padding: 20px; margin-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .attribution a { color: #0EA5E9; text-decoration: none; }
    .attribution a:hover { text-decoration: underline; }
    .loading { text-align: center; padding: 40px; color: #94a3b8; }
    .error {
      background: rgba(239,68,68,0.1); border: 1px solid #ef4444;
      color: #ef4444; padding: 16px; border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Crypto Signals</h1>
    <div class="stats">
      <div class="stat">
        <div class="stat-value" id="total">-</div>
        <div class="stat-label">Total Signals</div>
      </div>
      <div class="stat">
        <div class="stat-value" id="buy">-</div>
        <div class="stat-label">BUY</div>
      </div>
      <div class="stat">
        <div class="stat-value" id="hold">-</div>
        <div class="stat-label">HOLD</div>
      </div>
      <div class="stat">
        <div class="stat-value" id="risk">-</div>
        <div class="stat-label">RISK</div>
      </div>
    </div>
    <div id="signals" class="signals">
      <div class="loading">Loading signals...</div>
    </div>
    <div class="attribution">
      Powered by <a href="https://mycryptosignal.com">MyCryptoSignal</a>
    </div>
  </div>
  <script>
    // REPLACE WITH YOUR API KEY
    const API_KEY = 'YOUR_API_KEY';
    const API_BASE = 'https://mycryptosignal.axiopistis-systems.workers.dev';

    async function loadSignals() {
      try {
        const res = await fetch(API_BASE + '/api/signals', {
          headers: { 'X-API-Key': API_KEY }
        });
        if (!res.ok) throw new Error('API error: ' + res.status);
        const data = await res.json();
        render(data.signals);
      } catch (err) {
        document.getElementById('signals').innerHTML =
          '<div class="error">Error: ' + err.message + '</div>';
      }
    }

    function render(signals) {
      const sorted = signals.sort((a, b) => b.confidence - a.confidence);
      document.getElementById('total').textContent = signals.length;
      document.getElementById('buy').textContent =
        signals.filter(s => s.action === 'BUY').length;
      document.getElementById('hold').textContent =
        signals.filter(s => s.action === 'HOLD').length;
      document.getElementById('risk').textContent =
        signals.filter(s => s.action === 'RISK').length;

      document.getElementById('signals').innerHTML = sorted.map(s => '<div class="signal ' + s.action + '">' +
        '<div class="signal-top">' +
          '<div><div class="coin-name">' + s.name + '</div>' +
          '<div class="coin-symbol">' + s.symbol + '</div></div>' +
          '<div style="text-align:right">' +
            '<span class="badge ' + s.action + '">' + s.action + '</span>' +
            '<div class="confidence">' + Math.round(s.confidence) + '%</div>' +
          '</div>' +
        '</div>' +
        '<p class="explanation">' + s.explanation + '</p>' +
        '<div class="timestamp">' + new Date(s.timestamp * 1000).toLocaleString() + '</div>' +
      '</div>').join('');
    }

    loadSignals();
    setInterval(loadSignals, 5 * 60 * 1000);
  </script>
</body>
</html>

Signal Table

A compact table view ideal for embedding in a sidebar or section of an existing page.

signal-table.html - Embeddable Table 
<div id="mcs-signals">
  <style>
    #mcs-signals {
      font-family: system-ui, sans-serif;
      background: #111827; color: #e5e7eb;
      border-radius: 8px; padding: 16px;
      max-width: 600px;
    }
    #mcs-signals h3 { margin: 0 0 12px; font-size: 1.1rem; }
    #mcs-signals table { width: 100%; border-collapse: collapse; }
    #mcs-signals th {
      text-align: left; padding: 8px;
      border-bottom: 1px solid #374151;
      font-size: 0.8rem; color: #9ca3af;
    }
    #mcs-signals td { padding: 8px; border-bottom: 1px solid #1f2937; }
    #mcs-signals .buy { color: #22c55e; font-weight: bold; }
    #mcs-signals .hold { color: #f59e0b; font-weight: bold; }
    #mcs-signals .risk { color: #ef4444; font-weight: bold; }
    #mcs-signals .mcs-attr {
      text-align: center; padding-top: 12px;
      font-size: 0.75rem; color: #6b7280;
    }
    #mcs-signals .mcs-attr a { color: #0EA5E9; text-decoration: none; }
  </style>
  <h3>Crypto Signals</h3>
  <table>
    <thead><tr><th>Coin</th><th>Signal</th><th>Confidence</th></tr></thead>
    <tbody id="mcs-table-body">
      <tr><td colspan="3" style="text-align:center;color:#6b7280">Loading...</td></tr>
    </tbody>
  </table>
  <div class="mcs-attr">
    Powered by <a href="https://mycryptosignal.com">MyCryptoSignal</a>
  </div>
</div>
<script>
(function() {
  const API_KEY = 'YOUR_API_KEY';
  const API_BASE = 'https://mycryptosignal.axiopistis-systems.workers.dev';

  fetch(API_BASE + '/api/signals', {
    headers: { 'X-API-Key': API_KEY }
  })
  .then(r => r.json())
  .then(data => {
    const top = data.signals
      .sort((a, b) => b.confidence - a.confidence)
      .slice(0, 20);
    document.getElementById('mcs-table-body').innerHTML = top.map(s =>
      '<tr><td>' + s.symbol + '</td>' +
      '<td class="' + s.action.toLowerCase() + '">' + s.action + '</td>' +
      '<td>' + Math.round(s.confidence) + '%</td></tr>'
    ).join('');
  });
})();
</script>

Minimal Embed

The simplest possible integration. Fetches and displays signals with minimal styling. Customize to match your site.

JavaScript - Drop Into Any Page 
<div id="mcs-feed"></div>
<script>
(function() {
  const API_KEY = 'YOUR_API_KEY';
  const API_BASE = 'https://mycryptosignal.axiopistis-systems.workers.dev';

  fetch(API_BASE + '/api/signals', {
    headers: { 'X-API-Key': API_KEY }
  })
  .then(r => r.json())
  .then(data => {
    const el = document.getElementById('mcs-feed');
    const buys = data.signals
      .filter(s => s.action === 'BUY')
      .sort((a, b) => b.confidence - a.confidence)
      .slice(0, 5);

    el.innerHTML = buys.map(s =>
      '<p><strong>' + s.symbol + '</strong> — ' +
      s.action + ' (' + Math.round(s.confidence) + '%) — ' +
      s.explanation + '</p>'
    ).join('') +
    '<p style="font-size:0.8em">Powered by ' +
    '<a href="https://mycryptosignal.com">MyCryptoSignal</a></p>';
  });
})();
</script>

Integration Guidelines

API Key Security

  • Never expose your API key in client-side JavaScript on production sites
  • Use a backend proxy (Node.js, Python, PHP, Cloudflare Worker) to forward requests
  • Store your API key in environment variables, not in code

Backend Proxy Example (Node.js)

server.js 
const express = require('express');
const app = express();

app.get('/api/signals', async (req, res) => {
  const response = await fetch(
    'https://mycryptosignal.axiopistis-systems.workers.dev/api/signals',
    { headers: { 'X-API-Key': process.env.MCS_API_KEY } }
  );
  const data = await response.json();
  res.json(data);
});

app.listen(3000);

Caching Best Practices

  • Signals: Update once daily at 08:00 UTC. Cache for 23 hours.
  • Market data: Updates every 30 minutes. Cache accordingly.
  • Coins list: Rarely changes. Cache for 24 hours.

Display Requirements

  • Always include a visible disclaimer that signals are not financial advice
  • Display the signal date so users know when it was generated
  • Show confidence scores alongside signals
  • Include attribution linking to mycryptosignal.com

Attribution

All public use of signals requires visible attribution. Here are the accepted formats:

Text Link (Minimum Required)

HTML 
Powered by <a href="https://mycryptosignal.com">MyCryptoSignal</a>

Footer Badge (Recommended)

HTML 
<div style="text-align:center; padding:10px; font-size:0.85rem;">
  Data provided by
  <a href="https://mycryptosignal.com" style="color:#0EA5E9;">
    MyCryptoSignal
  </a>
</div>

Attribution Rules

  • Must be visible on every page where signals are displayed
  • Must include a clickable link to https://mycryptosignal.com
  • Must not be hidden, obscured, or require user interaction to view
  • Failure to attribute may result in API key revocation

Ready to Integrate?

Get your free API key and start displaying signals on your site

Get API Key